/* Copyright (c) 2025 by Tristan Gibbs (https://codepen.io/gibbs_digital/pen/BadrxOM) */
*,
*::before,
*::after {
  box-sizing: border-box;
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  /* Compensate for excess margin on outer gallery flex items */
  margin: -1rem -1rem;
}
.news {
  display: flex;
  flex-wrap: wrap;
  /* Compensate for excess margin on outer gallery flex items */
  margin: -1rem -1rem;
  padding-bottom: 40px;
}
.gallery-full {
  /* Minimum width of 24rem and grow to fit available space */
  flex: 1 0 24rem;
  /* Margin value should be half of grid-gap value as margins on flex items don't collapse */
  margin: 1rem;
  overflow: hidden;
}
.gallery-item {
  /* Minimum width of 24rem and grow to fit available space */
  flex: 1 0 24rem;
  /* Margin value should be half of grid-gap value as margins on flex items don't collapse */
  margin: 1rem;
  overflow: hidden;
}
.gallery-image, .news-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease-out;
}
.gallery-image:hover, .news-image:hover {
  transform: scale(1.15);
}
/*
The following rule will only run if your browser supports CSS grid.
Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling. 
*/
@supports (display: grid) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    grid-gap: 1.0rem;
  }
  .gallery,
  .gallery-item {
    margin: 0;
  }
}
@supports (display: grid) {
  .news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    grid-gap: 0rem;
  }
  .news, {
    margin: 0;
  }
}
@media (max-width: 850px) {
  @supports (display: grid) {
    .gallery {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
@media (max-width: 420px) {
  @supports (display: grid) {
    .gallery {
      grid-template-columns: repeat(1, 1fr);
    }
  }
}
@media (min-width:850px) and (max-width:1200px){
@supports (display: grid) {
  .news {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    grid-gap: 0rem;
  }
}
}