@layer components {
  .cmp-main-heading--pages {
    margin-top: clamp(4rem, 10vw, 9rem);
    text-align: center;
  }
}

@layer base {
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 2 - HISTORY / SECTION-ONE / HERO ***       \\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .cmp-hero__section--pg2-s1 {
    background: url("/assets/images/history-bg.jpeg") no-repeat;
    background-size: cover;
    background-position: center 0px;
    background-blend-mode: overlay;

    &::before {
      --hero-overlay-start: rgba(2, 9, 27, 0.5);
      --hero-overlay-end: rgba(2, 9, 27, 0.5);

      content: "";
      position: absolute;
      inset: 0;
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 2 - HISTORY / SECTION-TWO / HISTORY ***       \\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .about-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;

    @media (width > 62.5rem) {
      flex-direction: row;
      gap: 7rem;
    }

    .about-text-container {
      p {
        margin-top: 1rem;
      }

      @media (width > 62.5rem) {
        max-width: 40%;

        p {
          margin-top: 1.5rem;
        }
      }
    }

    .about-image-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--margin-pictures);
      align-items: end;

      img:nth-child(1) {
        justify-self: end;
        aspect-ratio: 1 / 1;
        object-position: center 40%;
      }

      img:nth-child(2) {
        aspect-ratio: 1 / 1.25;
      }

      img:nth-child(3) {
        position: relative;
        aspect-ratio: 2 / 1;
        grid-column: span 2;
        justify-self: center;
        max-width: 80%;
      }

      @media (width > 62.5rem) {
        img:nth-child(1) {
          aspect-ratio: 1 / 1.2;
          max-width: 82%;
          object-position: center 30%;
        }

        img:nth-child(2) {
          aspect-ratio: 1.4 / 1;
          object-position: center 100%;
        }

        img:nth-child(3) {
          justify-self: center;
          align-self: start;
          max-width: 68%;
          aspect-ratio: 1.8 / 1;
          left: 4%;
          object-position: center 55%;
        }
      }
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 2 - HISTORY / SECTION-THREE / ARTICLE ***       \\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .about-container--pg3-s3 {
    .about-text-container {
      max-width: 100%;

      @media (width > 62.5rem) {
        max-width: 55%;
      }
    }

    .article-image-container {
      max-width: 75%;
      margin-inline: auto;
    }

    .about-container__btn {
      margin-top: 0.35rem;
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 4 - GALLERY / SECTION-ONE / HERO ***       \\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .cmp-hero__section--pg4-s1 {
    background: url("/assets/images/gallery-bg.jpg") no-repeat;
    background-size: cover;
    background-position: center 0px;
    background-blend-mode: overlay;

    &::before {
      --hero-overlay-start: rgba(2, 9, 27, 0.6);
      --hero-overlay-end: rgba(2, 9, 27, 0.6);

      content: "";
      position: absolute;
      inset: 0;
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 4 - GALLERY / SECTION-TWO / GALLERY ***       \\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .gallery-page-heading-container {
    text-align: center;

    h2 {
      margin-inline: auto;
      margin-bottom: 1.25rem;

      @media (width > 47.5rem) {
        margin-bottom: 2rem;
      }
    }

    p {
      margin-bottom: 3rem;
      opacity: 0.85;

      @media (width > 47.5rem) {
        margin-bottom: 4.5rem;
      }
    }
  }

  .gallery-page-container {
    margin-inline: auto;

    a {
      display: inline-block;
      width: 48%;
      margin-bottom: var(--margin-pictures);
    }

    img {
      object-position: center 50%;
      cursor: pointer;
    }

    a:nth-of-type(1) img {
      aspect-ratio: 1 / 1.55;
      object-position: 30% 100%;
    }

    a:nth-of-type(2) img {
      aspect-ratio: 2 / 1;
      object-position: center 53%;
    }

    a:nth-of-type(3) img {
      aspect-ratio: 1.3 / 1;
      object-position: center 85%;
    }

    a:nth-of-type(4) img {
      aspect-ratio: 1.45 / 1;
      object-position: center 70%;
    }

    a:nth-of-type(5) img {
      aspect-ratio: 1.1 / 1;
      object-position: center 90%;
    }

    a:nth-of-type(6) img {
      aspect-ratio: 1.6 / 1;
      object-position: center 58%;
    }

    a:nth-of-type(7) img {
      aspect-ratio: 1.75 / 1;
      object-position: center 50%;
    }

    a:nth-of-type(8) img {
      aspect-ratio: 1.5 / 1;
      object-position: center 55%;
    }

    a:nth-of-type(9) img {
      aspect-ratio: 1.3 / 1;
      object-position: center 30%;
    }

    a:nth-of-type(10) img {
      aspect-ratio: 1.6 / 1;
      object-position: center 15%;
    }

    a:nth-of-type(11) img {
      aspect-ratio: 1.25 / 1;
      object-position: center 55%;
    }

    a:nth-of-type(12) img {
      aspect-ratio: 1 / 1.15;
      object-position: center 100%;
    }

    a:nth-of-type(13) img {
      aspect-ratio: 1.45 / 1;
      object-position: center 40%;
    }

    a:nth-of-type(14) img {
      aspect-ratio: 1.5 / 1;
      object-position: center 80%;
    }

    a:nth-of-type(15) img {
      aspect-ratio: 1.25 / 1;
    }

    a:nth-of-type(16) img {
      aspect-ratio: 2 / 1;
      object-position: center 62%;
    }

    a:nth-of-type(17) img {
      aspect-ratio: 1.3 / 1;
      object-position: center 52%;
    }

    a:nth-of-type(18) img {
      aspect-ratio: 1.5 / 1;
      object-position: center 78%;
    }

    a:nth-of-type(19) img {
      aspect-ratio: 2 / 1;
      object-position: center 77%;
    }

    a:nth-of-type(20) img {
      aspect-ratio: 1.75 / 1;
      object-position: center 55%;
    }

    a:nth-of-type(21) img {
      aspect-ratio: 1.1 / 1;
      object-position: center 100%;
    }

    a:nth-of-type(22) img {
      aspect-ratio: 1.3 / 1;
      object-position: center 40%;
    }

    a:nth-of-type(23) img {
      aspect-ratio: 1.1 / 1;
      object-position: center 40%;
    }

    a:nth-of-type(24) img {
      aspect-ratio: 1.65 / 1;
      object-position: center 50%;
    }

    a:nth-of-type(25) img {
      aspect-ratio: 1.45 / 1;
      object-position: center 55%;
    }

    @media (width > 47.5rem) {
      a {
        width: 31.5%;
      }

      a:nth-of-type(14) img {
        aspect-ratio: 2 / 1;
        object-position: center 72%;
      }
    }

    @media (width > 62.5rem) {
      a {
        width: 32.3%;
      }
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 5 - CONTACT / SECTION-ONE / HERO ***       \\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .cmp-hero__section--pg5-s1 {
    background: url("/assets/images/contact-bg.jpg") no-repeat;
    background-size: cover;
    background-position: center 0px;
    background-blend-mode: overlay;

    &::before {
      --hero-overlay-start: rgba(2, 9, 27, 0.6);
      --hero-overlay-end: rgba(2, 9, 27, 0.6);

      content: "";
      position: absolute;
      inset: 0;
    }
  }

  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\      *** PAGE 5 - CONTACT / SECTION-TWO / CONTACT ***       \\\\\\\\\\\\\\\\\\\\\\\\\ */
  /* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

  .contact-flex-container--pg5-s1 {
    margin-right: unset;

    @media (width > 47.5rem) {
      flex-direction: column;
      justify-content: unset;
      gap: 14.5rem;
    }
  }

  .contact-flex__text-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    text-align: center;

    @media (width > 31.25rem) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-items: center;
    }

    @media (width > 62.5rem) {
      grid-template-columns: 0.75fr 1fr 1.25fr;
      justify-items: left;
    }

    @media (width < 26.25rem) {
      margin-top: 0;
    }
  }

  .contact-text-container__inner-flex {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;

    &:hover {
      transform: scale(1.02);
    }

    @media (width > 31.25rem) {
      margin-inline: unset;
      text-align: left;
    }

    h3 {
      color: var(--clr-main-text);
      margin-bottom: 0.25rem;
    }

    a,
    span {
      opacity: 0.75;
    }

    a {
      text-decoration: underline;
      text-decoration-thickness: 0.05em;
      text-underline-offset: 0.3em;
      text-decoration-color: #02031c30;
      transition: transform 0.5s ease-out;
    }
  }

  .contact-page-google-maps {
    position: relative;
    display: block;
    max-width: 80%;
    aspect-ratio: 1.75 / 1;
    margin-inline: auto;
    grid-column: 1/ 3;

    @media (width > 62.5rem) {
      align-self: center;
      grid-column: 3 / 4;
      aspect-ratio: 1.5 / 1;
      max-width: 100%;
      grid-row: 1;
    }
  }
}

@layer animations {
}