/*-----------------------------------------------------------------------------
author:    www.visityakima.com
-----------------------------------------------------------------------------*/


/* =Yakima Convention Center Catering page
-----------------------------------------------------------------------------*/

  /* Collage */
  .collage {
    display: grid;
    grid-template-columns: 2fr 1fr;               /* big left, narrow right */
    grid-template-rows: 1fr 1fr;                  /* right column splits in two rows */
    grid-template-areas:
      "big top"
      "big bottom";
    gap: 12px;
    /* keep a pleasing overall shape while remaining responsive */
    aspect-ratio: 3 / 2;
    background: #fff;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(15,62,82,.08);
  }

  .cell {
    position: relative;
    overflow: hidden;
    background: #ddd;     /* subtle fallback while images load */
  }

  .cell--big    { grid-area: big; }
  .cell--top    { grid-area: top; }
  .cell--bottom { grid-area: bottom; }

  .cell img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;     /* fill the cell while preserving subject */
  }

  /* Mobile: stack vertically */
  @media (max-width: 700px) {
    .collage {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      grid-template-areas:
        "big"
        "top"
        "bottom";
      aspect-ratio: auto;        /* let height flow naturally on small screens */
    }
    .cell { min-height: 220px; }  /* give smaller cells some height */
    .cell--big { min-height: 300px; }
  }

/* Container styling */
.takeoutDetails {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px; 
  background-color: #0f3e52; 
  border: 1px solid #0f3e52; 
  overflow: hidden;
  margin:0 0 2em 0;
}

/* Individual column styling */
.takeoutDetails .column {
  background-color: #ffffff; 
  padding: 24px;
  
  display: flex;
  /* Tell the flexbox to stack children vertically instead of horizontally */
  flex-direction: column; 
  /* "justify-content" now handles vertical centering in a column layout */
  justify-content: center; 
  /* "align-items" now handles horizontal centering */
  align-items: center; 
  text-align: center; 
}

/* Ensure the heading and paragraph behave as block elements with clean spacing */
.takeoutDetails .column h3 {
  display: block;
  margin-top: 0;
  margin-bottom: 8px; /* Adds a little breathing room below the heading */
}

.takeoutDetails .column p {
  display: block;
  margin-top: 0;
  margin-bottom: 0; /* Prevents extra bottom margin from throwing off the centering */
  padding:0;
}

/* Responsive design: Stack on smaller devices */
@media (max-width: 768px) {
  .takeoutDetails {
    grid-template-columns: 1fr;
  }
}



@media screen and (max-width: 1000px) {
	

}
	

@media screen and (max-width: 800px) {
	
		
}
	
@media screen and (max-width: 750px) {



}

@media screen and (max-width: 650px) {
	
table {
	display:none;
	}
	
}

@media screen and (max-width: 450px) {



}