/**
 * @file
 * Accordion Plus Photo
 *
 * Styles for Accordion Plus Photo object.
 */

@use '_helper' as *;

.accordion-plus-photo {
  &__image {
    @media screen and (max-width: $break-medium - 1) {
      display: none;
    }

    &-inner {
      border-radius: rem(15px);
      overflow: hidden;
    }

    img {
      width: 100%;
    }
  }

  &__content {
    @media screen and (min-width: $break-medium) {
      margin-top: 32px;
    }

    @media screen and (min-width: $break-large) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: rem(40px);
    }

    >p {
      @media screen and (min-width: $break-large) {
        margin: 0 0 rem(21px);
      }
    }
  }

  &__accordion {
    @media screen and (min-width: $break-medium) {
      margin: 0 0 rem(40px);
    }
  }

  &__dates {
    @media screen and (min-width: $break-medium) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: rem(20px);
    }
  }

  &__date {
    &:not(:last-of-type) {
      @media screen and (max-width: $break-medium - 1) {
        margin: 0 0 rem(20px);
      }
    }

    &__heading {
      font-size: rem(20px);
      margin: 0 0 rem(10px);
      font-style: normal;
      font-weight: 500;
      line-height: 1.35;

      @media screen and (min-width: $break-medium) {
        font-size: rem(22px);
        margin: 0 0 rem(4px);
      }

      @media screen and (min-width: $break-large) {
        font-size: rem(25px);
      }
    }

    &__description {
      font-size: rem(16px);
      margin: 0;
      font-style: normal;
      font-weight: 400;
      line-height: 1.5;

      @media screen and (min-width: $break-large) {
        font-size: rem(18px);
        margin: 0;
      }
    }
  }
}