/******************************************************************

Stylesheet: Block Style
Block: Warehouse Info

******************************************************************/
/******************************************************************

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
WRAPS
*********************/
/*********************
COLORS
*********************/
/*********************
FONT FAMILY
*********************/
/*********************
FONT SIZES
*********************/
/*********************
PADDINGS
*********************/
/*********************
TRANSITIONS
*********************/
.sp-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .sp-image-grid {
    display: grid;
    grid-template-areas: "Big SmallTop" "Big SmallBottom";
    grid-template-columns: 2fr 1fr;
  }
}
.sp-image-grid .sp-image-grid-item {
  line-height: 0;
}
.sp-image-grid .sp-image-grid-item:nth-child(1) {
  grid-column: span 2;
}
@media (min-width: 768px) {
  .sp-image-grid .sp-image-grid-item:nth-child(1) {
    grid-area: Big;
    grid-column: auto;
    aspect-ratio: 4/3;
  }
  .sp-image-grid .sp-image-grid-item:nth-child(2) {
    grid-area: SmallTop;
  }
  .sp-image-grid .sp-image-grid-item:nth-child(3) {
    grid-area: SmallBottom;
  }
  .sp-image-grid .sp-image-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}