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


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

section img {
	margin:0 0 2em 0;
    width:100%;
	}
	
table {
	text-align:left;
	width:100%;
	padding:0;
	margin:0 0 2em 0;
	font-size:75%;
	border-radius: 20px;
	}
	
table tr:nth-child(1) {
	background:#0f3e52;
	color:#ffffff;
	font-weight:bold;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;	
	}
	
table tr:nth-child(2n+0) {
	background:#d5ecf7;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	}
	
table tr td {
	padding:.5%;
	vertical-align:middle;
	}



  /* 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; }
  }






@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) {



}