@import "../variables.scss";

.events-page {
  .annual-events {
    padding-top: 4rem;
    padding-bottom: 4rem;

    h3 {
      font-size: 1.5rem;
    }

    p {
      font-weight: 500;
      margin-top: 0.25rem;
    }

    header {
      margin-bottom: 1rem;

      button {
        margin-top: 1rem;
      }
    }

    .annual-events__link-item {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      height: 16rem;
      border-radius: $border-radius;
      padding: 1rem;
      background: linear-gradient(180deg, rgba(20, 21, 21, 0) 0%, #141515 100%),
        url("../../assets/images/landing-page/discover-ssss-main.png");
      background-size: cover;
      background-position: center;
      cursor: pointer;
      text-decoration: none;
    }

    .annual-events__link-items {
      margin-top: 2rem;

      .annual-events__link-item:nth-child(1) {
        background: linear-gradient(
            180deg,
            rgba(20, 21, 21, 0) 0%,
            #141515 100%
          ),
          url("../../assets/images/landing-page-hero.jpg");
        background-size: cover;
        background-position: center;
      }

      .annual-events__link-item:nth-child(2) {
        background: linear-gradient(
            180deg,
            rgba(20, 21, 21, 0) 0%,
            #141515 100%
          ),
          url("../../assets/images/landing-page-hero.jpg");
        background-size: cover;
        background-position: center;
      }

      .annual-events__link-item:nth-child(3) {
        background: linear-gradient(
            180deg,
            rgba(20, 21, 21, 0) 0%,
            #141515 100%
          ),
          url("../../assets/images/landing-page/discover-ssss-main.png");
        background-size: cover;
        background-position: center;
      }
    }

    .annual-events__subscribe-button {
      margin-top: 2rem;
      display: flex;
      justify-content: center;

      button {
        background-color: var(--colour-neutral-000);
        color: var(--colour-neutral-1200);
      }
    }

    @include viewport(tablet-desktop) {
      header {
        grid-area: header;
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;

        button {
          margin-top: 0;
        }
      }

      .annual-events__link-items {
        display: flex;
        justify-content: center;
        gap: 1rem;

        .annual-events__link-item {
          flex: 1 1 0px;
        }

        .annual-events__link-item:nth-child(1)::before {
          background-image: url("../../assets/images/landing-page-hero.jpg");
        }
      }
    }

    .annual-events__subscribe-button {
      justify-content: flex-end;
    }
  }
}
