@layer layout {
  .blocks-layout {
    --_section-space: var(--space-section-md);

    padding-block: var(--padding-start, 0) var(--padding-end, 0);

    text-align: var(--text-align);

    &.-spacing-sm {
      --_section-space: var(--space-section-sm);
    }
    &.-spacing-lg {
      --_section-space: var(--space-section-lg);
    }
    &.-spacing-xl {
      --_section-space: var(--space-section-xl);
    }

    &.-padding-both {
      --padding-start: var(--_section-space);
      --padding-end: var(--_section-space);
    }

    &.-padding-top {
      --padding-start: var(--_section-space);
    }

    &.-padding-bottom {
      --padding-end: var(--_section-space);
    }

    &.-align-center {
      --text-align: center;
    }

    &.-align-right {
      --text-align: end;
    }

    &.-white {
      background-color: var(--color-white);
    }

    &.-gray {
      background-color: oklch(from var(--color-neutral) calc(l + 0.61) c h);
    }
  }

  .blocks-image {
    &:has(> a) {
      > a {
        display: block;
        block-size: 100%;
      }
    }

    &[style*="--image-ratio"] {
      aspect-ratio: var(--image-ratio);
    }

    picture {
      block-size: 100%;
    }

    img {
      block-size: 100%;
      inline-size: 100%;

      object-fit: cover;
    }

    &[style*="--image-ratio"][data-crop="false"] img {
      object-fit: contain;
    }
  }

  .blocks-heading {
    margin-block-end: 1rem;
  }

  .blocks-box {
    padding: 1.5rem;

    background-color: oklch(from var(--color-neutral) calc(l + 0.61) c h);
    overflow-wrap: break-word;

    + .blocks-box {
      margin-block-start: 1.5rem;
    }

    &.-height-full {
      block-size: 100%;
    }

    :is(p, ul, ol):last-child {
      margin-block-end: 0;
    }
  }

  .grid:has(.blocks-box) {
    margin-block-end: 1.5rem;
  }

  .blocks-header {
    margin-block-end: 3rem;

    &.-center {
      text-align: center;
    }

    h2 {
      margin-block-end: 0.5rem;

      font-size: var(--font-size-2xl);
    }

    p {
      margin: 0 auto;
      max-inline-size: 50rem;

      font-size: var(--font-size-lg);
    }
  }

  .blocks-hero {
    text-align: center;

    h1 {
      margin-block-end: unset;

      font-size: var(--font-size-3xl);
    }

    p {
      margin-block: 0.5rem 0;
      max-inline-size: 40rem;
      margin-inline: auto;

      font-size: var(--font-size-lg);
    }
  }

  .blocks-gallery {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), 1fr);
    gap: 1.5rem;

    @media (width < 45rem) {
      grid-template-columns: repeat(2, 1fr);
    }

    a {
      transition: opacity 0.1s linear;

      &:hover,
      &:focus-visible {
        opacity: 0.75;
      }
    }

    img {
      block-size: 100%;
      object-fit: cover;
      aspect-ratio: 16/11;
    }

    &.columns-2 {
      --columns: 2;
    }

    &.columns-3 {
      --columns: 3;
    }

    &.columns-4 {
      --columns: 4;
    }

    &.columns-5 {
      --columns: 5;
    }

    &.-featured {
      display: block;

      .blocks-gallery-preview {
        position: relative;
        display: block;
      }

      .blocks-gallery-title {
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        padding: 2rem 1.5rem 1.25rem;

        background: linear-gradient(to top, oklch(0 0 0 / 0.65), transparent);
        color: var(--color-white, #fff);
        font-size: var(--font-size-xl);
        font-weight: 600;
        line-height: 1.25;
        pointer-events: none;
      }

      img {
        inline-size: 100%;
        aspect-ratio: 16 / 9;
      }
    }
  }

  .blocks-important-dates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1.5rem;
    padding-block: var(--space-section-md);

    @media (width < 45rem) {
      grid-template-columns: 1fr;
    }

    h2 {
      max-inline-size: 25rem;
      margin-block-end: 1.25rem;

      line-height: 1.25;
      font-size: var(--font-size-2xl);

      span {
        background-color: var(--color-primary);
        color: oklch(from var(--color-neutral) calc(l - 0.15) c h);
      }
    }

    p {
      margin: unset;
      max-inline-size: 25rem;

      font-size: var(--font-size-lg);
    }

    .social {
      display: flex;
      gap: 1rem;
      margin-block-start: 1.5rem;
    }

    ol {
      padding: unset;
      margin: unset;

      list-style-type: none;
    }

    time {
      padding: 0.5rem 1rem;

      background-color: var(--color-primary);
      color: oklch(from var(--color-neutral) calc(l - 0.15) c h);

      font-size: var(--font-size-lg);
      font-weight: 500;
    }

    @media (width > 35rem) {
      ol {
        position: relative;

        &::before {
          content: "";

          position: absolute;
          block-size: calc(100% + 2rem);
          inline-size: 2px;
          inset-block-start: -1rem;
          inset-inline-start: calc(200px + 2rem - 1px);

          background-color: oklch(
            from var(--color-primary) calc(l - 0.15) calc(c + 0.05) calc(h - 15)
          );
        }

        &::after {
          content: "";

          position: absolute;
          block-size: 12px;
          aspect-ratio: 1;
          inset-block-end: -1rem;
          inset-inline-start: calc(200px + 2rem - 6px);

          background-color: oklch(
            from var(--color-primary) calc(l - 0.15) calc(c + 0.05) calc(h - 15)
          );
        }

        li {
          display: grid;
          grid-template-columns: 200px 1fr;
          justify-items: start;
          align-items: center;
          gap: 4rem;
          position: relative;

          &:not(:last-child) {
            margin-block-end: 1.5rem;
          }

          &::before {
            content: "";

            position: absolute;
            block-size: 12px;
            aspect-ratio: 1;
            inset-block-start: -1rem;
            inset-inline-start: calc(200px + 2rem - 6px);

            background-color: oklch(
              from var(--color-primary) calc(l - 0.15) calc(c + 0.05)
                calc(h - 15)
            );
          }
        }
      }
    }

    @media (width < 35rem) {
      time {
        margin-block-end: 0.25rem;
        display: inline-block;
      }

      li {
        margin-block-end: 1.5rem;

        p::before {
          margin-inline-end: 0.5rem;
          content: "→";

          color: oklch(
            from var(--color-primary) calc(l - 0.15) calc(c + 0.05) calc(h - 15)
          );
        }

        &:last-child {
          margin-block-end: 0;
        }
      }
    }
  }

  .blocks-faq-section {
    background: var(--color-primary)
      linear-gradient(
        45deg,
        var(--color-primary) 50%,
        oklch(from var(--color-primary) calc(l - 0.15) c h)
      );

    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      block-size: clamp(10rem, 10vw + 1rem, 15rem);

      @media (width < 27rem) {
        flex-direction: column;
        justify-content: center;
      }
    }

    h2 {
      max-inline-size: 35rem;
      margin-block-end: unset;

      font-size: var(--font-size-2xl);
      line-height: 1.25;

      span {
        background-color: oklch(from var(--color-neutral) calc(l - 0.15) c h);
        color: var(--color-primary);
      }

      @media (width < 27rem) {
        margin-block-end: 1.25rem;

        text-align: center;
      }
    }
  }

  .blocks-cta-section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    padding-inline: 1rem;
    block-size: clamp(20rem, 25vw + 1rem, 30rem);

    background-color: oklch(from var(--color-neutral) calc(l - 0.15) c h);

    isolation: isolate;

    text-align: center;

    h2 {
      max-inline-size: 35rem;
      margin-block-end: 1.25rem;

      color: var(--color-white);

      line-height: 1.25;
      font-size: var(--font-size-2xl);

      span {
        background-color: var(--color-white);
        color: oklch(from var(--color-neutral) calc(l - 0.15) c h);
      }
    }

    p {
      margin-block: 0 3rem;
      max-inline-size: 35rem;

      color: var(--color-white);

      font-size: var(--font-size-lg);
    }

    img {
      inset: 0;
      position: absolute;
      block-size: 100%;
      inline-size: 100%;

      z-index: -1;
      object-fit: cover;
      opacity: 0.5;
    }
  }

  .blocks-hotel-section {
    header {
      margin-block-end: 3rem;
    }

    article {
      padding: 1rem;

      border: 1px solid oklch(from var(--color-neutral) calc(l + 0.5) c h);

      h3 {
        margin-block-end: 0.5rem;
      }

      *:last-child {
        margin-block-end: unset;
      }
    }
  }

  .blocks-race-categories {
    margin-block-start: 3rem;

    article {
      padding: 1.5rem;
      background-color: oklch(from var(--color-neutral) calc(l + 0.61) c h);
    }

    img {
      margin-block-end: 1.5rem;

      aspect-ratio: 16/12;
      object-fit: cover;
    }

    h2 {
      margin-block-end: unset;

      text-transform: uppercase;
      font-size: var(--font-size-2xl);
    }

    p:first-of-type {
      margin-block: unset;

      font-size: var(--font-size-lg);
    }

    a {
      inline-size: 100%;
      justify-content: center;
    }
  }

  .blocks-race-pricing {
    display: flex;
    gap: 3rem;
    justify-content: center;
    margin-block-start: 3rem;

    @media (width < 55rem) {
      gap: 1.5rem;
    }

    @media (width < 35rem) {
      flex-direction: column;
    }

    article {
      padding: 1.5rem;
      flex-basis: 33.33333333333333%;
      background-color: oklch(from var(--color-neutral) calc(l + 0.61) c h);

      @media (width < 55rem) {
        flex-basis: 50%;
      }

      header {
        padding-block-end: 1.5rem;

        text-align: center;

        border-block-end: 1px solid
          oklch(from var(--color-neutral) calc(l + 0.5) c h);
      }

      h2 {
        margin-block-end: unset;

        text-transform: uppercase;
        font-size: var(--font-size-3xl);
      }

      p {
        margin-block: unset;

        font-size: var(--font-size-lg);
      }

      dl {
        display: flex;
        justify-content: space-evenly;
      }

      dt {
        text-transform: uppercase;
        font-weight: 500;
      }

      dd {
        font-weight: 700;
        font-size: var(--font-size-2xl);
        line-height: 1.1;
      }

      dl > div:last-child {
        opacity: 0.5;

        dd {
          text-decoration: line-through;
        }
      }

      a {
        inline-size: 100%;
        justify-content: center;
      }

      footer {
        padding-block-start: 1.5rem;
        margin-block-start: 1.5rem;

        border-block-start: 1px solid
          oklch(from var(--color-neutral) calc(l + 0.5) c h);
      }
    }
  }

  .blocks-sponsors {
    h2 {
      margin-block-end: 0.5rem;

      font-size: var(--font-size-2xl);
    }

    figure {
      margin-block-start: 3rem;

      overflow: hidden;
    }

    ul {
      display: flex;
      margin: 0 0 0 -1.5rem;
      padding: unset;

      list-style-type: none;

      touch-action: pan-y pinch-zoom;
    }

    li {
      flex: 0 0 25%;
      min-inline-size: 0;
      padding-inline-start: 1.5rem;

      @media (width < 35rem) {
        flex: 0 0 50%;
      }
    }

    a {
      display: flex;
      block-size: 100%;
      align-items: center;
      padding: 1rem;
      border: 1px solid oklch(from var(--color-neutral) calc(l + 0.5) c h);
      transition: border-color 0.1s linear;

      &:hover,
      &:focus-visible {
        border-color: oklch(from var(--color-neutral) calc(l + 0.3) c h);
      }
    }

    img {
      aspect-ratio: 16/9;
      object-fit: contain;
    }

    nav {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      margin-block-start: 1.5rem;

      button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 2.75rem;
        block-size: 2.75rem;

        background-color: transparent;

        border: unset;

        cursor: pointer;
        appearance: none;
      }
    }
  }
}