/* Mobile-first: stack full width */
.block-left,
.block-right,
.block-big-left,
.block-big-right{
  width: 100%;
  max-width: 100%;
  margin: 10px 0;
  float: none;       /* neutralize floats on mobile */
  display: block;
}

/* Desktop+ */
@media (min-width: 768px) {
  .block-left {
    width: 30%;
    margin-right: 20px;    
    float: left;           /* fallback for block layout */
    margin-top: 0;
    margin-bottom: 10px;
  }
 
  .block-big-left {
    width: 66%;
    min-height: 300px;
    height: 40vh;      /* scales with viewport */
    max-height: 450px; /* prevents it from getting huge */
    margin-right: 20px;  
    display: flex;
    flex-direction: column;
  } 
  
 /* Align blue box title to bottom of div */
  .block-big-left .callout-box {
  margin-top: auto;
}

.block-big-left h2.callout-box{
  margin-bottom: 0;
  line-height: 1.1;
}

.block-big-left p{
  margin-top: auto;
  margin-bottom: 0;
  line-height: 1.1;
}

  .block-right {
    width: 30%;
    margin-left: 20px;     
    float: right;          /* fallback for block layout */
    margin-top: 0;
    margin-bottom: 10px;
  }
  
  .block-right iframe { /* for the calendar */
  	  width: 100%;
  	  min-height: 300px;
    	height: 30vh;      /* scales with viewport */
    	max-height: 400px; /* prevents it from getting huge */

  }

 .block-big-right {
    width: 66%;
    margin-left: 20px;     
    float: right;          /* fallback for block layout */
    margin-top: 0;
    margin-bottom: 10px;
  }
}
/* If there are images inside, keep them responsive */
.block-left img,
.block-right img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Clearfix for the container (if not flex/grid) */
.cols::after,
.region-content .layout-container::after {
  content: "";
  display: block;
  clear: both;
}