.upcoming_events-group {
  display: flex;
  flex-direction: column;

  .upcoming_events-row {
    align-self: center;

    width: 100%;
    max-width: calculateRem(1200);

    .upcoming_events {
      .title-paragraph-button {
        display: flex;

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

          margin-bottom: calculateRem(60);

          text-align: center
        }

        .title-paragraph {
          @include breakpoint(tablet) {
            width: 80%;
          }
        }
        .button-container {
          @include breakpoint(mobile) {

          }
          @include breakpoint(tablet) {
            width: 20%;
            text-align: right;
          }
        }
      }
      .events-container {
        .event {
          display: flex;

          box-shadow: 0 12px 32px 0 $shadow-gray;
          border-radius: 3px;

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

          &:not(:last-child) {
            margin-bottom: calculateRem(60);
          }

          .left-side {
            @include breakpoint(tablet) {
              min-width: calculateRem(200);
              width: 20%;
            }

            @include breakpoint(laptop) {
              min-width: calculateRem(300);
            }

            .top {
              position: relative;

              .date-container {
                padding-top: calculateRem(10);
                padding-right: calculateRem(25);
                padding-bottom: calculateRem(10);
                padding-left: calculateRem(25);

                box-shadow: 0 12px 22px 0 $shadow-gray;
                border-radius: 3px;

                text-align: center;

                @include breakpoint(mobileonly) {
                  margin-right: calculateRem(-15);
                  margin-left: calculateRem(-15);
                }

                @include breakpoint(tablet) {
                  position: absolute;
                  top: calculateRem(30);
                  left: calculateRem(-25);

                  width: calc(100% + 25px);
                }
                h2 {
                  margin-bottom: 0;

                  font-weight: 400;
                }
              }
            }
            .content {
              padding-top: calculateRem(20);
              padding-right: calculateRem(50);
              padding-left: calculateRem(50);

              @include breakpoint(tablet) {
                margin-top: calculateRem(100);
                padding-bottom: calculateRem(50);
              }

              text-align: center;

              .location {
                font-weight: 600;
              }
            }
          }
          .right-side {
            @include breakpoint(mobileonly) {
              padding-right: calculateRem(50);
              padding-left: calculateRem(50);
            }

            @include breakpoint(tablet) {
              display: flex;

              width: 80%;

              padding-left: calculateRem(50);
            }

            .big-section {
              flex-grow: 1;

              @include breakpoint(mobileonly) {
                padding-top: calculateRem(30);
                padding-right: 0;
                padding-bottom: calculateRem(30);
                padding-left: 0;
              }

              @include breakpoint(tablet) {
                padding-top: calculateRem(50);
                padding-right: calculateRem(25);
                padding-bottom: calculateRem(50);
              }

              @include breakpoint(laptop) {
                padding-right: calculateRem(50);
              }

              .top {
                .header-link {
                  display: inline-block;
                  color: inherit;
                }
              }
            }

            .icon-container {
              flex-shrink: 0;

              display: flex;
              flex-direction: column;
              justify-content: center;

              text-align: center;

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

              @include breakpoint(tablet) {
                height: 100%;
                width: calculateRem(60);
              }

              i {
                color: $mid-gray;

                @include breakpoint(mobileonly) {
                  transform: rotate(90deg);
                }
              }
            }
          }
        }
      }
    }
  }
}
