body > header {
  margin-inline: var(--page-margin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  & h1 {
    margin: 0;
  }
  & nav {
    & ul {
      padding: 0;
      list-style: none;
      display: flex;
      font-weight: 700;
      gap: 1em;
      & a {
        color: var(--text-color);
        text-decoration: none;
        padding: 1em 0.5em;
      }
    }
  }
  padding-block: 3rem 0;
}

#mobile_nav {
  display: none;

  button[aria-controls="primary_nav"] {
    border: none;
    padding: 0.5rem;
  }

  #primary_nav {
    box-sizing: border-box;
    border: 0;
    width: 100%;
    height: 100dvh;
    margin: 0;
    max-height: none;
    max-width: none;
    background: var(--primary-two);
    color: black;
    flex-direction: column;
    padding: 10vw 8vw;
    font-size: 1.75rem;
    text-align: end;

    &::backdrop {
      background: transparent;
    }

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      content: "";
      height: 5px;
      grid-column: full;
      --stop1: 26%;
      --stop2: 79%;
      --stop3: 100%;
      background: linear-gradient(
        to right,
        var(--primary-one) 0% var(--stop1),
        var(--primary-three) var(--stop1) var(--stop2),
        var(--primary-four) var(--stop2) var(--stop3)
      );
    }

    & nav ul {
      display: flex;
      flex-direction: column;
      text-align: start;
      align-items: stretch;
      & a {
        color: inherit;
        padding: 0.5rem;
      }
    }

    & button {
      display: inline-grid;
      border: none;
      height: 50px;
      width: 50px;
      background: none;
      line-height: 0;
      padding: 0;
      &::after {
        content: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.2962 2.66676L15.6913 15.6537L28.2962 28.6406L27.7982 29.1537L15.1933 16.1668L2.58831 29.1537L2.09033 28.6406L14.6953 15.6537L2.09033 2.66676L2.58831 2.15369L15.1933 15.1406L27.7982 2.15369L28.2962 2.66676Z' fill='black' stroke='black' stroke-width='3'/%3E%3C/svg%3E%0A");
        place-self: center;
        width: 60%;
        aspect-ratio: 1/1;
      }
    }
  }

  @media screen and (width < 50rem) {
    display: flex;
  }
}

body:has(dialog[open]) {
  overflow: hidden;
}

#desktop_nav {
  display: flex;
  @media screen and (width < 50rem) {
    display: none;
  }
}

body > footer {
  display: grid;
  gap: 4rem 1rem;
  margin-bottom: 6rem;
  grid-template-columns:
    [full-start]
    var(--page-margin)
    [content-start]
    1fr
    [column]
    auto
    [content-end]
    var(--page-margin)
    [full-end];

  &::before {
    content: "";
    height: 5px;
    margin-inline: 50px;
    grid-column: full;
    --stop1: 26%;
    --stop2: 50%;
    --stop3: 85%;
    background: linear-gradient(
      to right,
      var(--primary-one) 0% var(--stop1),
      var(--primary-three) var(--stop1) var(--stop2),
      var(--primary-four) var(--stop2) var(--stop3),
      var(--primary-two) var(--stop3) 100%
    );
  }
  border-image-slice: 1;

  & > nav:nth-child(1) {
    grid-column-start: content-start;
    & ul {
      padding: 0;
      list-style: none;
    }
    & > ul {
      display: flex;
      gap: 3em;
      font-weight: 700;
      margin: 0;

      & ul {
        font-weight: 500;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        margin-top: 0.2rem;
      }
    }
  }

  & > :nth-child(2) {
    display: grid;
    & ul {
      display: flex;
      list-style: none;
      padding: 0;
      justify-content: end;
      margin: 0;
      align-items: end;
    }
    & img {
      width: 2rem;
      padding: 0.5rem;
    }
  }

  & > :nth-child(3) {
    grid-column-start: content-start;
  }

  & > :nth-child(4) {
    font-size: 0.9em;
    display: flex;
    flex-wrap: wrap;
    width: min-content;
    justify-content: end;
    gap: 0 1em;
    & p {
      width: max-content;
      margin: 0;
    }
    & a {
      width: max-content;
    }
  }

  & nav a {
    color: var(--text-color);
    text-decoration: none;
  }

  @media screen and (width < 50rem) {
    grid-template-columns:
      [full-start]
      var(--page-margin)
      [content-start]
      1fr
      [content-end]
      var(--page-margin)
      [full-end];

    gap: 5vw 0;

    &::before {
      margin-inline: var(--page-margin);
    }

    & > nav:nth-child(1) {
      & ul {
      }
      & > ul {
        grid-column: content;
        justify-content: center;
        gap: max(1rem, 7vw);
        & ul {
        }
      }
    }

    & > :nth-child(2) {
      grid-column: content;
      justify-content: center;
      & ul {
      }
      & img {
      }
    }

    & > :nth-child(3) {
      grid-column: content;
      justify-self: center;
    }

    & > :nth-child(4) {
      grid-column: content;
      justify-self: center;
      justify-content: center;
      & p {
      }
      & a {
      }
    }

    & nav a {
    }
  }
}

main {
  display: flex;
  flex-direction: column;
  gap: 9rem;
  margin-block: 10rem;
  @media screen and (width < 50rem) {
    margin-block: max(2rem, 10vh);
    gap: max(3rem, 15vh);
  }
}

.avatar {
  border-radius: 999px;
  width: 2.5rem;
  border: 4px solid transparent;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(45deg, #ffc354, #ff0471) border-box;
}

/* home page sections */

#hero {
  --grid-gap: min(1vw, 1rem);
  display: grid;
  grid-template-columns:
    calc(var(--page-margin) - var(--grid-gap)) 2fr 2fr 2fr 3fr
    calc(var(--page-margin) - var(--grid-gap));
  gap: var(--grid-gap);

  grid-template-rows: min(15vw, 13rem) 7rem 10rem;

  img:not(.avatar) {
    border-radius: var(--rounding);
  }

  & > :nth-child(1) {
    grid-area: 1 / 2 / 2 / 5;
  }

  .hero__block {
    grid-area: 1 / 5 / 4 / 6;
    display: grid;
    align-items: stretch;

    & > div {
      display: grid;
      position: relative;
      z-index: -1;
      align-items: stretch;
      container-type: inline-size;
      width: 100%;
      height: 100%;

      &::after {
        position: absolute;
        aspect-ratio: 82/490;
        top: 0;
        bottom: 0;
        z-index: 1;
        content: "";
        background: url("../images/hero-temple-transparent-overhang.png");
        background-size: contain;
        background-position: -1px 0;
        background-repeat: no-repeat;
        grid-area: 1/1/2/2;
        transform: translateX(calc(100cqw - 1px));
      }

      & > img {
        background-image: radial-gradient(
          at -10% 30%,
          #fffb8f 0%,
          #ffd13b 15%,
          #fa384f 100%
        );
        border-radius: var(--rounding);
        object-position: 100% 100%;
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
  }

  & > :nth-child(3) {
    grid-area: 2 / 2 / 3 / 4;
    align-self: end;
  }

  & > :nth-child(4) {
    grid-area: 3 / 2 / 4 / 3;
    position: relative;
    img.avatar {
      position: absolute;
      bottom: -1.25rem;
      left: 1rem;
      z-index: 5;
    }
  }

  & > :nth-child(5) {
    grid-area: 3 / 3 / 4 / 4;
    min-width: 13ch;
    background: var(--light-midtone);
    border-radius: var(--rounding);
    font-size: 0.8rem;
    margin: 0;
    padding-inline: 1.5rem;
    font-weight: 700;
    position: relative;
    display: grid;
    place-items: center;
    img.avatar {
      position: absolute;
      top: -1.25rem;
      left: 1rem;
      z-index: 5;
    }
  }

  & > :nth-child(6) {
    grid-area: 2 / 4 / 4 / 5;
    position: relative;
    img.avatar {
      position: absolute;
      bottom: -1.25rem;
      right: 1rem;
      z-index: 5;
    }
  }

  & > :is(:nth-child(4), :nth-child(6)) > img:not(.avatar) {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  @media screen and (width < 55rem) {
    --grid-gap: min(1vw, 1rem);
    grid-template-columns:
      calc(var(--page-margin) - var(--grid-gap)) 2fr 1fr 2fr
      calc(var(--page-margin) - var(--grid-gap));
    grid-template-rows: auto auto auto;

    @media screen and (width < 30rem) {
      grid-template-columns:
        calc(var(--page-margin) - var(--grid-gap)) 4fr 2fr
        calc(var(--page-margin) - var(--grid-gap));
      grid-template-rows: auto auto auto;
      & > :nth-child(3) {
        grid-area: 2 / 2 / 3 / 3 !important;
        margin-bottom: 0;
      }
      & > :nth-child(5) {
        display: none;
      }
      .hero__block {
        grid-area: 2 / 3 / 4 / 4 !important;
      }
    }

    img:not(.avatar) {
    }

    & > :nth-child(1) {
    }

    .hero__block {
      grid-area: 2 / 4 / 4 / 5;
      aspect-ratio: auto;
      & > div {
        &::after {
          position: absolute;
        }
      }
    }

    & > :nth-child(3) {
      padding-right: 1em;
      padding-bottom: 1em;
    }

    & > :nth-child(5) {
      padding-top: 1.5em;
      padding-bottom: 0.5em;
    }

    & > :nth-child(6) {
      display: none;
    }
  }
}

.hero__text {
  container-type: inline-size;
  width: 122%;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 700;
  white-space: nowrap;

  & > div {
    font-size: max(3.5rem, 10.6cqw);
  }

  & > div:nth-child(1) span:nth-child(1) {
    color: var(--primary-three);
  }

  & > div:nth-child(1) span:nth-child(2) {
    color: var(--dark-midtone);
  }

  & > div:nth-child(2) {
    display: block;
    margin-left: 2ch;
    span {
      color: var(--primary-one);
    }
  }

  @media screen and (width < 55rem) {
    width: 100%;

    & > div {
      font-size: max(2rem, 12cqw);
    }
  }
}

#destinations {
  display: grid;
  grid-template-columns:
    var(--page-margin)
    [content-start]
    1fr
    [content-end]
    var(--page-margin);

  & header {
    grid-column: content;
    display: flex;
    align-items: baseline;
    gap: 2em;
    & a {
      color: #039f8f;
      font-weight: 700;
      font-size: 1.4rem;
      text-decoration: none;
      display: flex;
      gap: 0.2em;
      &::after {
        content: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.67481 17L14.3218 9.571V11.871L7.67481 4.442H11.6308L16.8288 10.054V11.388L11.6308 17H7.67481ZM2.22381 12.216V9.226H14.1148V12.216H2.22381Z' fill='%23039f8f'/%3E%3C/svg%3E%0A");
      }
    }
  }

  & > div {
    grid-row: 2/3;
    grid-column: 1/-1;
    width: 100%;
    overflow: hidden;
  }

  & ul.scroller {
    & li {
      display: grid;
      grid-template-areas: "stack";
      container-type: inline-size;
      & img {
        aspect-ratio: 7/4;
        grid-area: stack;
        object-fit: cover;
        place-self: stretch;
        border-radius: var(--rounding);
      }
      & a {
        grid-area: stack;
        align-self: end;
        justify-self: start;
        background: var(--background);
        padding: 0.7em 3em;
        display: flex;
        gap: clamp(0.5rem, 3cqi, 2rem);
        align-items: center;
        font-weight: 700;
        color: var(--text-color);
        text-decoration: none;
        border-radius: 0 1.5em 0 0;
        font-size: clamp(0.8rem, 3cqi, 2rem);
        &:after {
          content: "";
          background: url("data:image/svg+xml,%3Csvg width='8' height='15' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.35125 0L0 1.35125L4.38917 5.75L0 10.1488L1.35125 11.5L7.10125 5.75L1.35125 0Z' fill='%23323232'/%3E%3C/svg%3E%0A");
          aspect-ratio: 8/15;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          width: clamp(0.5rem, 2.5cqi, 1.5rem);
        }
      }
    }
  }

  @media screen and (width < 50rem) {
    h1 {
      margin: 0;
    }
    header {
      flex-direction: column;
      gap: 0.5rem;
      margin-bottom: 2rem;
    }

    ul.scroller {
      & > li {
        flex: 0 0 80dvw;

        & img {
        }
        & a {
        }
      }
    }
  }
}

.embla__nav {
  display: flex;
  gap: 1em;
  justify-content: center;
  margin-top: 2rem;

  .embla__dot {
    border-radius: 999px;
    background: var(--mid-midtone);
    aspect-ratio: 1/1;
    border: none;
    &.embla__dot--selected {
      background: var(--primary-two);
    }
  }
}

#advice {
  background-color: var(--light-midtone);
  border-radius: var(--rounding);
  margin: 0 var(--page-margin);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 6vw, 3rem);
  grid-template-areas: "left right";
  padding: clamp(1rem, 6vw, 3rem);

  & > div {
    grid-area: right;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    & h2 {
      margin: 0;
    }
    & .button {
      margin-bottom: 1.5rem;
    }
  }
  & img {
    border-radius: var(--rounding);
    grid-area: left;
  }
  & blockquote {
    background-color: #ffffff;
    border-radius: var(--rounding);
    grid-area: left;
    align-self: end;
    justify-self: start;
    max-width: 23ch;
    padding: clamp(1.5rem, 7vw, 2.5rem) clamp(1rem, 5vw, 2rem);
    position: relative;
    font-weight: 700;
    font-size: 0.8em;
    box-shadow: 11px 15px 21.5px rgba(0, 0, 0, 0.1);
    left: -20%;
    bottom: -10%;
    & img.avatar {
      position: absolute;
      top: -1.25rem;
      left: 1.25rem;
    }
  }
}

/* destinations page */

#thingstodo {
  display: grid;
  --grid-gap: 2rem;
  grid-template-columns:
    calc(var(--page-margin) - var(--grid-gap))
    [content-start]
    5fr
    [midline]
    6fr
    [content-end]
    calc(var(--page-margin) - var(--grid-gap));
  gap: var(--grid-gap);
  & h1 {
    grid-column: content;
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0 0 1rem 0;
    &::after {
      content: "";
      display: block;
      height: 5px;
      flex: 1;
      grid-column: full;
      --stop1: 26%;
      --stop2: 50%;
      --stop3: 85%;
      background: linear-gradient(
        to right,
        var(--primary-one) 0% var(--stop1),
        var(--primary-three) var(--stop1) var(--stop2),
        var(--primary-four) var(--stop2) var(--stop3),
        var(--primary-two) var(--stop3) 100%
      );
    }
  }
  & img {
    object-fit: cover;
    border-radius: var(--rounding);
  }
  & img:nth-child(2) {
    grid-column: content-start / midline;
  }

  & img:nth-child(3) {
    grid-column: midline / content-end;
    grid-row-start: 2;
    place-self: start start;
    width: 65%;
    aspect-ratio: 2/1;
  }

  & img:nth-child(4) {
    grid-column: midline / content-end;
    grid-row-start: 2;
    place-self: end end;
    width: 50%;
    aspect-ratio: 2/1;
  }

  & p.highlighted {
    grid-column: content-start / midline;
    font-weight: 700;
    font-size: 2rem;
    margin: 0;
    text-wrap: balance;
  }
  & > div {
    & p {
      margin: 0.7em;
    }
  }

  @media screen and (width < 40rem) {
    grid-template-columns:
      calc(var(--page-margin) - var(--grid-gap))
      [content-start]
      1fr
      [content-end]
      calc(var(--page-margin) - var(--grid-gap));
    gap: 1rem;

    & img:nth-child(2) {
      grid-column: content;
    }

    & img:nth-child(3) {
      display: none;
    }

    & img:nth-child(4) {
      display: none;
    }

    & p.highlighted {
      grid-column: content;
    }

    & > div {
      grid-column: content;
      p {
        margin: 0.7em 0;
      }
      p:first-child {
        margin-top: 0;
      }
    }

    h1 {
      display: flex;
      flex-direction: column;
      gap: 0.35em;
      &::after {
        width: 100%;
        flex: 0 0 5px;
      }
    }
  }
}

#cultural {
  --slide-bg-colour: #e9eaef;
  --accent-colour: var(--primary-one);
}

#food {
  --slide-bg-colour: #efefe9;
  --accent-colour: var(--primary-three);
}

#shopping {
  --slide-bg-colour: #dee9db;
  --accent-colour: var(--primary-two);
}

:is(#cultural, #food, #shopping) h2 {
  margin-inline: var(--page-margin);
}

:is(#cultural, #food, #shopping) .scroller {
  list-style: none;

  & li:not(:last-child) {
    padding-right: 2rem;
  }

  & li:first-child {
    flex: 0 0 0;
    & p {
      border-bottom: 5px solid var(--accent-colour);
      align-self: start;
      padding-bottom: 1.5em;
      width: 20ch;
      font-weight: 700;
      font-size: 1.25rem;
      line-height: 1.5em;
    }
  }

  & li:not(:first-child) {
    display: grid;
    align-items: stretch;
    flex: 0 0 60ch;
  }
  & article {
    display: grid;
    grid-template-columns: 2fr 3fr;
    background-color: var(--slide-bg-colour);
    border-radius: var(--rounding);
    overflow: hidden;
    scroll-margin-top: 10dvh;
    & .content {
      padding: 3rem;
      display: flex;
      flex-direction: column;
    }
  }
  & h3 {
    font-family: "Plus Jakarta Sans", Helvetica, sans-serif;
    font-size: 2rem;
    margin: 0;
  }
  & img {
    object-fit: cover;
    place-self: stretch stretch;
  }
  & p:last-of-type {
    margin-bottom: 2rem;
  }
  & dl {
    margin-top: auto;
    line-height: 1.7em;
  }
  & dt {
    font-weight: 700;
    display: inline;
  }
  & dd {
    margin: 0 0 0.75rem 0;
    display: inline;
    &::after {
      content: "\A";
      white-space: pre;
    }
  }
  & .button {
    margin-top: 1rem;
    background-color: transparent;
    border-color: var(--primary-one);
    &::after {
      content: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.67481 17L14.3218 9.571V11.871L7.67481 4.442H11.6308L16.8288 10.054V11.388L11.6308 17H7.67481ZM2.22381 12.216V9.226H14.1148V12.216H2.22381Z' fill='%230E6EFE'/%3E%3C/svg%3E%0A");
    }
  }

  @media screen and (width < 50rem) {
    & li:first-child {
      display: none;
    }
    & li:not(:first-child) {
      flex: 0 0 calc(80dvw);
    }
    article {
      grid-template-columns: 1fr;
      grid-template-rows: 35dvh 1fr;

      img {
        width: 100%;
      }

      & .content {
        padding: 6dvw;
        & dl {
          margin-top: 0;
        }
      }
    }
  }
}

/* travel advice page */

:has(> #toc) {
  display: grid;
  --grid-gap: max(2rem, 7vw);
  grid-template-columns:
    calc(var(--page-margin) - var(--grid-gap))
    [content-start]
    auto
    [midline]
    1fr
    [content-end]
    calc(var(--page-margin) - var(--grid-gap));
  gap: var(--grid-gap);
  & > div {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    & > section:first-child {
      display: grid;
      gap: 2rem;
      grid-template-columns: 6fr 3fr;
      & img {
        min-width: 0;
        border-radius: var(--rounding);
        aspect-ratio: 4/5;
        object-fit: cover;
        object-position: 50% 100%;
      }
      & h1 {
        margin-top: 0;
        margin-bottom: 1rem;
      }
    }

    & h2 {
      margin-block: 0 1rem;
    }

    & h3 {
      margin-block: 2rem 0.75rem;
    }
    & p {
      margin-top: 0.5rem;
    }
  }

  & section[id]::before {
    content: " ";
    display: block;
    height: 5px;
    width: 200px;
    background-color: var(--accent-colour, var(--dark-midtone));
    margin-bottom: 3rem;
  }

  & :is(section#plan, li:has(a[href="#plan"])) {
    --accent-colour: var(--primary-one);
  }
  & :is(section#travel, li:has(a[href="#travel"])) {
    --accent-colour: var(--primary-two);
  }
  & :is(section#payments, li:has(a[href="#payments"])) {
    --accent-colour: var(--primary-three);
  }
  & :is(section#etiquette, li:has(a[href="#etiquette"])) {
    --accent-colour: var(--primary-four);
  }

  @media screen and (width < 50rem) {
    --grid-gap: max(1rem, 5vw);
    grid-template-columns:
      calc(var(--page-margin) - var(--grid-gap))
      [content-start]
      1fr
      [content-end]
      calc(var(--page-margin) - var(--grid-gap));
    gap: 4rem var(--grid-gap);
  }
}

#toc {
  grid-column: content-start / midline;
  width: 15rem;
  & ol {
    top: 3rem;
    position: sticky;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
  }
  & a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    padding: 0 0.5em;
    font-size: 1.25rem;
  }

  & li {
    display: flex;
    align-items: center;

    &:has(a.active)::after {
      content: "";
      flex: 1;
      height: 5px;
      /* background-color: var(--accent-colour); */
      --stop1: 3ch;
      --stop2: 4ch;
      --stop3: 6.5ch;
      background: linear-gradient(
        to right,
        var(--primary-one) 0% var(--stop1),
        var(--primary-three) var(--stop1) var(--stop2),
        var(--primary-four) var(--stop2) var(--stop3),
        var(--primary-two) var(--stop3) 100%
      );
    }
  }
  @media screen and (width < 50rem) {
    width: auto;
  }
}

:has(> #toc) > div {
  grid-column: midline / content-end;
}

/* contact page */

#contact-info {
  display: grid;
  --grid-gap: min(5rem, 2vw);
  grid-template-columns:
    calc(var(--page-margin) - var(--grid-gap))
    [content-start]
    1fr
    [midline]
    1fr
    [content-end]
    calc(var(--page-margin) - var(--grid-gap));
  gap: var(--grid-gap);

  & > h1 {
    grid-column: content;
    margin: 0;
  }

  & > img {
    grid-column: content;
    aspect-ratio: 3/1;
    object-fit: cover;
    object-position: 50% 100%;
    width: 100%;
    height: 100%;
    border-radius: var(--rounding);
  }

  & > div:nth-child(3) {
    grid-column: content-start / midline;
    margin-left: var(--grid-gap);
    & h2 {
      margin: 0;
    }
  }

  & > div:nth-child(4) {
    grid-column: midline / content-end;
    padding: calc(var(--grid-gap) + 1rem);
    background-color: var(--light-midtone);
    border-radius: var(--rounding);
    margin-top: -4rem;
    margin-right: 3rem;
  }

  & iframe {
    width: 100%;
    aspect-ratio: 1/1;
  }
  & address {
    margin-top: 1rem;
    font-style: normal;
  }

  @media screen and (width < 50rem) {
    grid-template-columns:
      calc(var(--page-margin) - var(--grid-gap))
      [content-start]
      auto
      [content-end]
      calc(var(--page-margin) - var(--grid-gap));

    gap: 3rem var(--grid-gap);

    & > h1 {
      grid-column: content;
    }

    & > img {
      grid-column: content;
    }

    & > div:nth-child(3) {
      grid-column: content;
      & h2 {
      }
    }

    & > div:nth-child(4) {
      grid-column: content;
      margin-top: 0;
      margin-right: 0;
    }

    & iframe {
    }
    & address {
    }
  }
}

/* General styles */

.button {
  background-color: white;
  text-decoration: none;
  font-weight: 700;
  color: var(--text-color);
  grid-template-columns: max-content auto;
  width: max-content;
  align-items: center;
  border-radius: 999px;
  border: 3px solid var(--primary-two);
  padding: 1em 4em 1em 3em;
  text-align: center;
  position: relative;

  &::after {
    content: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.67481 17L14.3218 9.571V11.871L7.67481 4.442H11.6308L16.8288 10.054V11.388L11.6308 17H7.67481ZM2.22381 12.216V9.226H14.1148V12.216H2.22381Z' fill='%232CCBBA'/%3E%3C/svg%3E%0A");
    position: absolute;
    right: 1.5em;
  }
}

.embla {
  /* padding-inline: var(--page-margin); */
  overflow: hidden;
}

.scroller {
  display: flex;
  will-change: transform;
  list-style-type: none;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
  margin: 0;
  padding: 0;

  img {
    -webkit-user-drag: none;
  }
  li {
    flex-shrink: 0;
    flex-basis: min(35vw, 700px);
    padding-right: 2rem;
    /* &:first-of-type {
      padding-left: var(--page-margin);
    } */
  }
}

:root {
  --page-margin: max(1.5rem, calc((100vw - min(75rem, 90vw)) / 2));
  --rounding: 25px;
  --text-color: #282c50;
  --primary-one: #0066ff;
  --primary-two: #2ccbba;
  --primary-three: #ff308a;
  --primary-four: #ff7d54;
  --dark-midtone: #9c96aa;
  --mid-midtone: #bfbaca;
  --light-midtone: #e9eaef;
  --background: #f5f5f5;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  overflow-x: clip;
}

body {
  font-family: "Plus Jakarta Sans", Helvetica, sans-serif;
  margin: 0;
  color: var(--text-color);
  background-color: var(--background);
}

h1,
h2 {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 700;
}

h3,
h4,
h5,
h6 {
  font-family: "Plus Jakarta Sans", Helvetica, sans-serif;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.5rem;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  image-rendering: auto;
  overflow-clip-margin: unset;
}

p {
  line-height: 1.5em;
}

section[id] {
  scroll-margin-top: 2rem;
}

figure {
  margin: 0;
}

/* FONTS */

/* plus-jakarta-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/plus-jakarta-sans-v12-latin-regular.woff2") format("woff2");
}
/* plus-jakarta-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/plus-jakarta-sans-v12-latin-600.woff2") format("woff2");
}
/* plus-jakarta-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/plus-jakarta-sans-v12-latin-700.woff2") format("woff2");
}

/* newsreader-500 - latin */
@font-face {
  font-display: swap;
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 100 900;
  src: url("../fonts/Newsreader-VariableFont_opsz\,wght.ttf")
    format("truetype-variations");
}

/* animation stuff */

dialog#primary_nav {
  transform: translateX(100%);
  transition:
    transform 0.1s cubic-bezier(0.22, 1, 0.36, 1),
    display 0.1s allow-discrete,
    overlay 0.1s allow-discrete;
}

dialog#primary_nav[open] {
  transform: translateX(0);
}

@starting-style {
  dialog#primary_nav[open] {
    transform: translateX(100%);
  }
}