.upcoming_ee_events-group {
  .upcoming_ee_events-row {
    &.negative-margin-top {
      @include breakpoint(tablet) {
        margin-top: 0;
        padding-top: 0;
      }

      .upcoming_ee_events {
        .first-card, .events, & > .event-card.card-1, & > .event-card.card-2 {
          @include breakpoint(tablet) {
            margin-top: calculateRem($negative-margin);
          }
        }
        .events .event-card {
          margin-top: 0;
        }
      }
    }

    &.negative-margin-bottom {
      @include breakpoint(tablet) {
        margin-bottom: 0;
        padding-bottom: 0;
      }

      .upcoming_ee_events {
        .first-card, .events {
          @include breakpoint(tablet) {
            margin-bottom: calculateRem($negative-margin);
          }
        }
        .events .event-card {
          margin-bottom: 0;
        }
      }
    }

    .upcoming_ee_events {
      display: flex;

      width: 100%;

      @include breakpoint(mobile) {
        flex-direction: column;
      }

      @include breakpoint(tablet) {
        flex-direction: row;
        justify-content: space-between;
      }

      &.rows {
        flex-wrap: wrap;

        .first-card {
          margin-bottom: calculateRem(30);

          .filter {
              margin-top: calculateRem(40);
            width: 100%;

            .dropdown {
              background-color: $light;
              color: $mid-gray;

              li {
                &:hover {
                  a {
                    color: inherit;
                  }
                }
                a {
                  display: block;

                  height: 100%;
                  width: 100%;

                  color: inherit;
                }
              }
            }
          }
        }

        .event-card {
          margin-bottom: calculateRem(30);

          @include breakpoint(mobile) {
            width: 100%;
          }

          @include breakpoint(tablet) {
            width: calc(50% - 15px);
          }

          &:nth-child(-n+3),
    			&:nth-child(5n+1),
    			&:nth-child(5n+2),
    			&:nth-child(5n+3) {
    				@include breakpoint(mobile) {
    					width: 100%;
    				}

    				@include breakpoint(tablet) {
    					width: calc(50% - 15px);
    				}

    				@include breakpoint(laptop) {
    					width: calc(33% - 15px);
    				}
    			}
        }
        .empty-card{
            @include breakpoint(mobile) {
              width: 100%;
            }

            @include breakpoint(tablet) {
              width: calc(50% - 15px);
            }
            @include breakpoint(laptop) {
                width: calc(33% - 15px);
            }
        }
      }

      &.slider {
        .events {
          display: flex;
          justify-content: space-between;

          position: relative;


          @include breakpoint(mobile) {
            width: 100%;
          }

          @include breakpoint(tablet) {
            width: calc(66.6666666% - 15px);
          }
          .event-card {
            @include breakpoint(mobile) {
              width: 100%;
            }

            @include breakpoint(tablet) {
              width: calc(50% - 15px);
            }
          }

          .icon-container {
            position: absolute;
            top: 45%;

            display: flex;
            justify-content: center;
            align-items: center;

            height: calculateRem(35);
            width: calculateRem(35);

            z-index: 99;

            border-radius: 50%;

            background-color: rgba($mid-gray, 0.81);

            &.forward {
              right: calculateRem(-25);
            }

            &.back {
              left: calculateRem(-25);

              display: none;
            }

            cursor: pointer;

            i {
              font-size: calculateRem(14);
              line-height: calculateRem(35);
            }
          }
        }
      }

      .first-card {
        display: flex;
        flex-direction: column;
        justify-content: center;


        padding-top: calculateRem(40);
        padding-right: calculateRem(40);
        padding-bottom: calculateRem(40);
        padding-left: calculateRem(40);

        @include breakpoint(mobile) {
          width: 100%;
          margin-bottom: calculateRem(30);
        }

        @include breakpoint(tablet) {
          width: calc(33.3333333% - 15px);
          margin-bottom: 0;
        }

        .title-paragraph {
          .paragraph {
            margin-bottom: 0;
            @include breakpoint(tablet) {
              display: none;
            }

            @include breakpoint(laptop) {
              display: block;
            }
          }
        }
        .button-container {
            a.button {
                margin-top: calculateRem(40);
            }
        }
      }

      .event-card {
        height: 100%;
        background-color: $light;

        box-shadow: 0 6px 10px 0 rgba(0,0,0,0.11);
        color: $dark;

        .image-container {
          overflow: hidden;
          display: flex;
          flex-flow: column nowrap;
          .image {
            width: 100%;
            transition: all 1s ease-out;
            &:hover {
              transform: scale(1.1);
            }
            &::after {
              content: "";
              padding-top: 66%;
              width: 100%;
              position: relative;
              display: block;
            }
          }
        }
        .card-content {
          padding-top: calculateRem(20);
          padding-right: calculateRem(20);
          padding-bottom: calculateRem(20);
          padding-left: calculateRem(20);

          .date {
            margin-bottom: calculateRem(10);
          }

          .title-link {
            color: $dark;
          }
        }
      }
    }
  }
}
