/* Only apply on small screens */
@media (max-width: 950px) {

  main#menu {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    max-width: 1200px; /* keeps content centered and not too wide */
    width: 100%;       /* ensures it never exceeds viewport */
    padding: 0rem;
  }

  .drink {
    flex-direction: row;      /* still row layout */
    height: auto;             /* let it adjust to content */
    display: flex;
    background: #252525; /* dark card */
    box-shadow: 0 2px 8px rgba(0,0,0,0.7);
    overflow: hidden;
    border-radius: 1px;
    align-items: center; /* <-- centers imagebox and infobox vertically */
    margin-top: 5px; /* <-- add top margin only */
  }

  .imagebox {
    max-width: 33.33%;        /* 1/3 of the row */
    height: 250px;            /* you can adjust for mobile */
  }

  .imagebox img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* crop if needed */
    aspect-ratio: 5 / 9;
  }

  .infobox {
    flex: none;
    width: 66.66%;           /* 2/3 of the row */
    padding: 1rem;
  }

  .infobox h2 {
    font-size: 1.5rem;
  }

  .infobox p {
    font-size: 1rem;
  }

  .infobox .description {
    font-size: 0.9rem;
  }
}