#content-container {
      margin-left: 0;
      margin-right: 0;
      grid-template-rows: 100vh 150vh minmax(70vh, max-content) 80vh 260vh 120vh minmax(150vh, max-content);

      width: 100vw;
      row-gap: 10vh;
    }

    @media screen and (min-width: 1200px) {
      margin-left: auto;
      margin-right: auto;
    }

    #tour-button p {
      font-family: var(--Alverata);
      color: var(--brand-third);
      place-self: center;
    }

    #main-header #grapes-continue {
      /* Flow behind other content. */
      position: absolute;
      z-index: 1;

      /* Positioning. Centered, flowing
         off the bottom of the screen
         to lead the user down. */
      bottom: 10vh;
      place-self: center;

      /* Keep it from growing */
      height: auto;
      width: 15%;
    }

    /* Sizing and margin setting for the
       continuation graphic. */
    #main-header #grapes-continue,
    #main-header #grapes-continue img {
        margin: 0;
        height: 8vh;
        width: auto;
        object-fit: cover;

        /* Don't let it expand outside
           the boundaries on mobile. */
        max-width: 100%;
    }

    /* A three-wide photo banner with text cards
       to serve as the "wedding story" of the day.
       Mobile will still be image-text cards, since
       there's unfortunately not much of a way to build
       something more unique with the current timeline.

       Maybe in v2.1. */

    #details-banner {
      grid-area: 2 / 1 / 3 / 6;
      display: grid;

      /* Three columns for the images,
         two rows to hold the header text
         and the images below. */
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 20% 80%;

      row-gap: 10vh;

      height: 90%;
      width: 85%;
      margin: 0 auto;

      box-sizing: border-box;

      place-self: start;
    }

    #details-banner #details-header {
      grid-area: 1 / 1 / 2 / 4;
      width: 50%;
      place-self: center;

      display: flex;
      flex-direction: column;
    }

    #details-banner #details-header p {
      font-size: 2rem;
      font-family: AlverataBl;
      text-align: center;
      place-self: center;
      z-index: 5;
    }

    /* TODO: Remove */
    #details-banner #grapes-separator {
      display: none;
    }

    #details-banner #grapes-separator img {
      height: 80%;
      width: auto;
      object-fit: cover;
    }

    /* The container for image/text cards. */
    #details-banner #details-images {
      grid-area: 2 / 1 / 3 / 4;
    }

    /* Gives the middle one the appearance of floating
       a little higher than the rest. Some nice depth. */
    #details-banner #details-images figure:nth-child(odd) {
      box-shadow: 0 4px 18px rgba(0,0,0,0.2);
      z-index: 2;
    }

    #details-banner #details-images figure:nth-child(even) {
      box-shadow: 0 14px 32px rgba(0,0,0,0.2);
      z-index: 3;
    }


    #details-banner p {
      text-align: left;
    }

    #details-banner .card {
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: 15% 40% 40%;

      width: 100%;
      height: 100%;

      padding: 0px;

      
    }

    #details-banner .card-inner-text {
      background-color: var(--brand-third);
      margin: 0px;

      background-image: url(https://admin.omniwinery.com/wp-content/uploads/2026/10/Untitled-design.png);
      background-size: 100%;
      background-blend-mode: difference;
      box-shadow: 0 14px 32px rgba(0,0,0,0.2);
    }

    #details-banner .card:nth-child(odd) figure,
    #details-banner .card:nth-child(odd) img {
      height: 100%;
      grid-area: 2 / 1 / 3 / 2;
    }

    #details-banner .card:nth-child(even) figure,
    #details-banner .card:nth-child(even) img {
      grid-area: 1 / 1 / 3 / 2;
      height: 100%;
    }

    #details-banner .card:nth-child(odd) .card-inner-text {
      background-position: 50% 50%;
      grid-area: 3 / 1 / 4 / 2;
      z-index: 2;
    }

    #details-banner .card:nth-child(even) .card-inner-text {
      grid-area: 3 / 1 / 4 / 2;
      z-index: 2;
      margin-bottom: 0px;
    }

    #hero-cta {
      grid-area: 3 / 1 / 4 / 6;
      height: 100%;
      width: 100%;

      margin: 0px;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      box-sizing: border-box;

      background-color: var(--brand-main);
      background-image: url(https://admin.omniwinery.com/wp-content/uploads/2026/10/Untitled-design-2.png);

      background-blend-mode: screen;

      border-top: 4px solid white;
      border-bottom: 4px solid white;
    }

    #hero-cta h2,
    #hero-cta p {
      text-align: center;
      margin: 15px 0px;
      color: var(--brand-third);
    }

    #hero-cta .button {
      width: 250px;
      margin-top: 55px;
      color: var(--brand-main);
      background: var(--brand-third)
    }

    #hero-cta .button a {
      color: var(--brand-main);
    }

    #cta-vine {
      padding-top: 55px;
    }

    #hero-cta #cta-vine,
    #hero-cta #cta-vine img {
      width: 300px;
      height: auto;
    }

    #staff-hero {
      display: grid;
      grid-area: 4 / 1 / 5 / 6;
      margin: 0px;

      grid-template-columns: 50% 50%;
      grid-template-rows: 100%;

      height: 100%;
      place-self: start;

      overflow: visible;
    }

    #staff-hero #team-img,
    #staff-hero #team-img img {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      width: 80%;
      height: 100%;
      object-fit: cover;
      margin: auto;
    }

    #staff-hero #staff-decoration {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      z-index: 5;
    }

    #staff-hero #staff-decoration,
    #staff-hero #staff-decoration img {
      height: 75%;
      width: 75%;
      object-fit: contain;

      position: relative;
      top: 22vh;
      left: -4vw;
    }

    #staff-hero .fifty-fifty-text {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      width: 70%;
      height: fit-content;
      margin-left: 10%;
      margin-top: auto;
      margin-bottom: auto;
    }

    .fifty-fifty-text h2 {
      text-align: left;
    }

    #wedding-banners {
      grid-area: 5 / 1 / 6 / 6;
      height: 100%;
      width: 100vw;
      display: grid;
      grid-template-columns: 100%;
      grid-template-rows: repeat(4, 24%);
      row-gap: 1%;
      column-gap: 10px;

      padding: 85px 55px;

      box-sizing: border-box;

      background-image: 
        url(https://admin.omniwinery.com/wp-content/uploads/2026/09/grapes-cream-20per.png),
        url(https://admin.omniwinery.com/wp-content/uploads/2026/09/grapes-cream-20per.png);

      background-repeat: no-repeat no-repeat;

      background-position: -50% 10%, 150% 80%;

      background-blend-mode: soft-light;

      background-color: var(--brand-main);
    }

    /* REMOVE once space pages are live. */
    #wedding-banners .card .card-buttons {
      display: none;
    }

    #venue-features {
      place-self: center;
      grid-area: 6 / 1 / 7 / 6;
      background-color: transparent;
    }

    @media screen and (min-width: 600px) {
      #vendor-list .vendor-block {
        grid-template-rows: repeat(2, 380px);
      }
    }

    #vendor-list {
      grid-area: 7 / 2 / 8 / 5;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      place-self: start;
      height: 90%;
      width: 100%;
      max-width: 1920px;
    }
        
    #vendor-list .vendor-query {
      display: block;
      height: 100%;
      width: 100%;
      max-width: 1920px;
      gap: 10px;
    }

    #vendor-list .vendor-query .vendor-block {
      /* The unordered list class. */
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      height: fit-content;
      max-width: 1920px;
      list-style: none;
      padding: 0px;
      margin: auto;
      gap: 5px;
    }

    #vendor-list .vendor-query .vendor-block li {
      display: flex;
      flex-direction: column;
      width: 25%;
      height: 35%;
      min-height: fit-content;
      gap: 25px;
      align-items: center;
      justify-content: flex-start;
      margin: 0px auto;
      max-width: 450px;
    }

    #vendor-list .vendor-query .vendor-block figure,
    #vendor-list .vendor-query .vendor-block img {
      grid-row: 1 / 2;
      place-self: center;
      width: 150px !important;
      height: 150px !important;
      border-radius: 50%;
      object-fit: cover;
      box-shadow: var(--global-shadow);
    }

    #vendor-list .vendor-query .vendor-block .vendor-name {
      grid-row: 2 / 3;
      margin: 0px;
      font-size: 26px;
      text-align: center;
    }

    #vendor-list .vendor-query .vendor-block .vendor-description {
      grid-row: 3 / 4;
      text-align: center;
      place-self: start;
    }

    @media screen and (max-width: 600px) {
      #content-container {
        grid-template-rows: 100vh minmax(300vh, max-content) 80vh minmax(600px, max-content) minmax(325vh, max-content) minmax(200vh, max-content) minmax(300vh, max-content);
        display: grid;
        grid-template-columns: 3% 28% 34% 28% 3%;
        row-gap: 3vh;
      }

      #main-header img {
        object-position: 30% 0%;
      }

      #details-banner {
        width: 100%;
        padding: 0px 15px;
      }

      #details-banner #details-header {
        width: 90%;
      }
      #details-banner #details-header p {
        font-size: 1.2rem;
      }

      #details-banner .card-inner-text {
        padding-top: 5%;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
      }
      #details-banner .card:nth-child(odd) figure,
      #details-banner .card:nth-child(odd) img {
        grid-area: 1 / 1 / 3 / 2;
      }

      .cta-button {
        padding-top: 15px;
      }

      .cta-button .button {
        place-self: center
      }

      #hero-cta {
        padding: 0px 15px;
      }

      #staff-hero {
        grid-template-columns: 100%;
        grid-template-rows: 35% 65%;
        width: 100%;
      }

      #staff-hero #team-img {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
        width: 100%;
        margin: auto;
        place-self: center;
        display: flex;
      }

      #staff-hero #staff-decoration {
        top: -5vh;
        left: -95vw;
        width: 200px;
      }

      #staff-hero .fifty-fifty-text {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        width: 80%;
      }

      #wedding-banners {
        display: flex;
        flex-direction: column;
        padding: 85px 10px;
      }

      #wedding-banners .card {
        display: flex;
        flex-direction: column;
        height: fit-content;
      }

      #wedding-banners .card figure,
      #wedding-banners .card img {
        height: 35vh;
      }

      #wedding-banners .card .card-inner-text {
        height: fit-content;
      }

      #wedding-banners .card .card-inner-text p {
        padding-bottom: 70px;
      }

      #venue-features {
        grid-area: 6 / 1 / 7 / 6;
        place-self: center center;
        padding-top: 15vh;
        margin-top: 0;
      }

      #venue-features h2 {
        margin-top: 0;
      }

      #vendor-list {
        grid-row: 7 / 8;
        place-content: start center;
        height: fit-content;
      }

      #vendor-list h3 {
        text-align: center;
      }

      #vendor-list .vendor-query .vendor-block {
        display: flex;
        flex-direction: column;
      }

      #vendor-list .vendor-query .vendor-block li {
        width: 90%;
      }
    }