@layer components {
  .drink-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100dvh - var(--header-height));
  }

  .drink-hero__grid {
    display: grid;
    grid-template-columns: 1fr 340px 1fr;
    align-items: center;
    gap: var(--space-6);
  }

  .drink-hero__intro {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: var(--space-4);
    text-align: right;
  }

  .drink-hero__title {
    font-size: var(--font-size-3xl);
    color: var(--color-brand-magenta);
  }

  .drink-hero__can img,
  .ingredients__can img {
    width: auto;
    height: 540px;
    margin: 0 auto;
    object-fit: contain;
  }

  .drink-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--space-4);
    color: var(--color-gray-dark);
  }

  .drink-hero__note {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
  }

  .ingredients__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: var(--space-6);
  }

  .ingredients__column {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .ingredients__can {
    position: relative;
    justify-self: center;
    width: min(100%, 340px);
  }

  .ingredients__abv {
    position: absolute;
    top: -2rem;
    right: -2rem;
    z-index: 1;
  }

  .how__card {
    --panel-space: var(--space-8) var(--space-6);
    --panel-gap: var(--space-4);

    align-items: center;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
  }

  .moments__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  @media (max-width: 1024px) {
    .drink-hero__grid,
    .ingredients__grid {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
    }

    .drink-hero__intro,
    .drink-hero__copy {
      align-items: center;
    }

    .ingredients__can {
      order: -1;
    }
  }

  @media (max-width: 768px) {
    .drink-hero__can img,
    .ingredients__can img {
      height: 280px;
    }
  }
}