/*--------------------------------------------------------------
# Page Destination
--------------------------------------------------------------*/

.page-destination {
  /* Where to Swim
--------------------------------------------- */
  .intro {
    > .wrapper {
      max-width: var(--max-w-xl);
      margin: 0 auto;
      padding: var(--padding-xxl) 24px;
    }

    .title {
      font-size: var(--font-2xl);
      font-weight: 500;
      margin-bottom: 1.5rem;
      line-height: 1.2;
    }
  }

  /* Section Content Gallery
--------------------------------------------- */

  .content-gallery-list {
    background-color: var(--primary-200);
    > .wrapper {
      padding: var(--padding-xxl) 24px;

      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 4.5rem;
    }

    .content-gallery {
      > .wrapper {
        max-width: var(--max-w-xl);
        margin: 0 auto;

        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 3rem;

        @media (min-width: 960px) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 4.5rem;
          align-items: center;
        }
      }

      .title {
        font-size: var(--font-2xl);
        line-height: 1.2;
        font-weight: 500;
        margin-bottom: 1.5rem;
      }

      .body p:not(:last-child) {
        margin-bottom: 1.5rem;
      }

      .swiper {
        img {
          object-fit: cover;
          aspect-ratio: 5 / 7;
        }

        .navigation {
          margin-bottom: 24px;
        }
      }
    }
  }

  @media (min-width: 960px) {
    .content-gallery-list .content-gallery:nth-child(2) {
      .col:nth-child(1) {
        grid-column: 2 / 3;
        grid-row: 1 / 1;
      }

      .col:nth-child(2) {
        grid-column: 1 / 2;
        grid-row: 1 / 1;
      }
    }
  }

  /* Where to Swim
--------------------------------------------- */
  .where-to-swim {
    > .wrapper {
      max-width: var(--max-w-xl);
      margin: 0 auto;
      padding: var(--padding-xxl) 24px var(--padding-xxl);
    }

    .header {
      margin-bottom: 3rem;

      .title {
        margin-bottom: 1.5rem;
        font-size: var(--font-2xl);
        line-height: 1.2;
        font-weight: 500;
      }
    }

    .beaches {
      margin-bottom: 3rem;

      .beaches-list {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 1.5rem;

        @media (min-width: 960px) {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 3rem;
        }

        .title {
          display: flex;
          align-items: center;
          gap: 0.5rem;

          a {
            font-weight: bold;
            text-decoration: underline;
            text-underline-offset: 0.25rem;
          }
        }
      }
    }

    .footer {
      p:not(:last-child) {
        margin-bottom: 1.5rem;
      }

      .link-wrapper {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;

        a {
        text-decoration: underline;
        text-underline-offset: 0.25rem;
        font-weight: bold;
      }
      }

      
    }
  }

  /* Map
--------------------------------------------- */
  .map {
    height: 50vh;
  }
}