.bottle {
  /* hero  */
  .hero {
    min-height: 100vh;

    .container-content {
      display: grid;
      grid-template-areas: "header header header";
      grid-template-columns: 1fr 2fr 1fr;
      color: var(--color-ivory);
      font-weight: 800;

      & div {
        grid-area: header;
      }
    }
  }
  @media (min-width: 800px) {
    .hero {
      min-height: 75vh;
    }
    .hero .container-content {
      grid-template-areas: ". header header";
    }
  }
  &.select-bourbon .double-tile {
    background-color: var(--color-gold);
    color: var(--color-ivory);
  }
  &.american-single-malt .double-tile {
    background-color: var(--color-blue-gray);
    color: var(--color-ivory);
  }
  /* &.limited-edition .double-tile {
    background-color: var(--color-gold);
    color: var(--color-ivory);
  } */
  &.single-barrel .double-tile {
    background-color: var(--color-heritage-light-red);
    color: var(--color-ivory);
  }

  /* bottle info  */
  .bottle-info {
    background-color: var(--color-ivory);
    color: var(--color-dark-char);

    .container-content {
      display: grid;
      grid-template-areas: "mainbottle" "buynow1" "description" "additional" "hrow" "awards";
      grid-template-columns: 1fr;
      gap: 1rem;
      text-align: center;
    }
    @media (min-width: 800px) {
      .container-content {
        display: grid;
        grid-template-areas: "mainbottle description additional" "hrow hrow hrow" "awards awards awards";
        grid-template-columns: 0.5fr 1fr 0.5fr;
        gap: 2rem;
        text-align: start;
      }
    }
    .main-bottle {
      grid-area: mainbottle;
      position: relative;
      display: flex;
      justify-content: center;

      & img {
        margin-top: -25vh;
        height: 450px;
      }
      @media (min-width: 800px) {
        & img {
          margin-top: -50vh;
          height: 750px;
        }
      }
      @media (max-width: 799px) and (orientation: landscape) {
        & img {
          margin-top: -10vh;
          height: 750px;
        }
      }
    }
    @media (min-width: 800px) {
      .main-bottle {
        justify-content: center;
      }
    }
    .buy-now-1 {
      grid-area: buynow1;
      margin-top: calc(var(--sub-section-margin-y) / 2);
      margin-bottom: calc(var(--sub-section-margin-y) / 2);
    }
    @media (min-width: 800px) {
      .buy-now-1 {
        grid-area: buynow1;
        display: none;
      }
    }
    .description {
      grid-area: description;

      & h2 {
        margin-top: 0;
      }
      & b {
        text-transform: uppercase;
        color: #000000;
      }
      & p {
        color: var(--color-dark-char);
      }
    }
    @media (min-width: 800px) {
      .description {
        margin-top: calc(var(--sub-section-margin-y) / 2);
      }
    }
    .additional {
      grid-area: additional;

      .buy-now-2 {
        display: none;
      }
      @media (min-width: 800px) {
        .buy-now-2 {
          display: block;
        }
      }
      .notes {
        & p {
          margin-top: 0;
        }
      }
    }
    @media (min-width: 800px) {
      .additional {
        margin-top: calc(var(--sub-section-margin-y) / 2);
      }
    }
    .buy-now button {
      background-color: var(--color-brown);
      color: var(--color-ivory);
    }
    .notes {
      grid-area: notes;

      & ul {
        list-style-type: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin: 0;

        p {
          margin-top: 0;
        }
        & p:last-of-type {
          margin-bottom: 0;
        }
      }
    }
    @media (min-width: 800px) {
      .notes ul {
        margin-top: 2rem;
      }
    }
    .hrow {
      grid-area: hrow;
      border-bottom: 3px solid var(--color-dark-char);
      width: 100%;
    }
    .awards {
      grid-area: awards;
      margin-top: calc(var(--sub-section-margin-y) / 2);
      margin-bottom: calc(var(--sub-section-margin-y) / 2);

      & ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        text-align: center;
        margin: 0;
        padding: 0;
        list-style-type: none;
        gap: 1em;

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

          & p {
            margin: 0;
          }
          & img {
            width: auto;
            height: 75px;
          }
        }
      }
    }
  }
}