.cta,
.view-switch {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--sp-8);
  width: fit-content;
  font-family: var(--ft-sb);
  font-size: var(--fs-14);
  letter-spacing: calc(var(--neg-1) * var(--fs-14));
  line-height: var(--lh-100);
  background-color: var(--black);
  color: var(--white);
  padding-inline: var(--sp-20) var(--sp-16);
  padding-block: var(--sp-16);
  border-radius: var(--sp-99);
  border: none;
  text-decoration: none;

  @media (hover: hover) {
    &:hover {
      svg {
        fill: var(--white);
      }
    }
  }
}
.view-switch {
  column-gap: var(--sp-8);
  border: none;
}

ol[role="list"] {
  counter-reset: item;

  li {
    counter-increment: item;
    display: grid;
    border-block-end: var(--border);
    padding-block: var(--sp-12);

    &::before {
      content: "(" counter(item, decimal-leading-zero) ")";
      font-family: var(--ft-m);
      font-size: var(--fs-16);
      letter-spacing: calc(var(--neg-3) * var(--fs-16));
      line-height: var(--lh-150);
      margin-inline-end: var(--sp-20);
      color: var(--black-tint-32);
    }
  }
}

ul[role="list"] {
  display: grid;
  
}

.contact {
  container: contact / inline-size;

  inner-wrapper {
    display: grid;
    grid-template-columns: 2fr 5fr 5fr;
    grid-template-areas:
      "header main img";

    header {
      grid-area: header;
      display: flex;
      flex-direction: column;

      picture {
        margin-block-start: auto;
      }
    }

    main {
      grid-area: main;
      width: 60%;
      margin-inline: auto;

      a {
        margin-block-start: var(--sp-40-20);
      }
    }

    >picture {
      grid-area: img;
    }

    @container (inline-size < 56.25rem) {
      grid-template-columns: 1fr;
      grid-template-areas:
        "header"
        "main"
        "img";
      row-gap: var(--sp-40);

      main {
        width: 100%;
      }
    }
  }
}

.main-footer {
  --logo-font-size: 17.1vw;
  container: footer / inline-size;

  inner-wrapper {
    padding-block: var(--sp-40) var(--sp-20);
    border-block-start: var(--border);

    header {
      display: grid;
      grid-template-columns: 3fr 5fr 4fr;

      nav {
        margin-inline-start: 20%;

        ul {
          display: flex;
          flex-direction: column;
          row-gap: var(--sp-12);

          li {
            a {
              text-decoration: none;
              color: var(--black);
            }
          }
        }
      }

      content-wrapper {
        contact-info {
          display: block;
          margin-block-start: var(--sp-40);

          address {
            font-style: normal;

            a {
              text-decoration: none;
              color: inherit;
            }

            span {
              display: block;

              &:not(:first-of-type) {
                margin-block-start: var(--sp-8);
                text-wrap: balance;
              }
            }
          }
        }
      }
    }

    .footer-logo {
      font-size: var(--logo-font-size);
      text-align: center;
      font-family: var(--ft-m);
      letter-spacing: calc(var(--neg-4) * var(--logo-font-size));
      line-height: var(--lh-100);
      padding-block: var(--sp-80-40);

      @container (inline-size < 50rem) {
        --logo-font-size: 16vw;
      }
    }

    footer {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: end;

      @container (inline-size < 40.625rem) {
        flex-direction: column;
        align-items: start;
        row-gap: var(--sp-20);
      }

      :where(small, a, p) {
        color: var(--black);
      }
      
      a {
        display: block;
        text-decoration: none;
      }
    }

    @container (inline-size < 56.25rem) {
      header {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "nav content"
          "image image";
        column-gap: var(--sp-40);
        
        picture {
          grid-area: image;

          img {
            max-height: var(--sp-300);
            object-fit: cover;
            margin-block-start: var(--sp-40);
          }
        }

        nav {
          grid-area: nav;
          margin-inline-start: 0;
        }

        content-wrapper {
          grid-area: content;
        }
      }
    }

    @container (inline-size < 34.375rem) {
      header {
        grid-template-columns: 1fr;
        grid-template-areas:
          "nav"
          "content"
          "image";
        
        content-wrapper {
          display: block;
          margin-block-start: var(--sp-40);
        }
      }
    }
  }
}

/* hero view transition animation */
.hero {
  h1 {
    view-transition-name: hero-h1;
  }
  h2 {
    view-transition-name: hero-h2;
  }
  p {
    view-transition-name: hero-p;
  }
  img {
    view-transition-name: hero-img;
  }
  span {
    view-transition-name: hero-span;
  }
}