/** Shopify CDN: Minification failed

Line 9:0 Unexpected "<"
Line 74:6 "place-item" is not a known CSS property
Line 102:2 Unexpected "<"

**/
/* START_SECTION:custom-image-grid (INDEX:10, SCOPED:FALSE) */
<style>
    .grid-container-custom {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /* creates 4 equal columns */
      padding: 10px;
      width: 100%;
      gap: 5px;
      box-sizing: border-box; /* prevents the padding from adding to the total width */
    }

    /* Selects the first anchor element and makes it take up half the container */
    .grid-container-custom a:nth-of-type(1) {
      grid-column: span 2; /* spans two columns */
      grid-row: span 2; /* spans two rows */
    }

    /* Selects the next four anchor elements and makes each take up one quarter of the container */
    .grid-container-custom a:nth-of-type(2),
    .grid-container-custom a:nth-of-type(3),
    .grid-container-custom a:nth-of-type(4),
    .grid-container-custom a:nth-of-type(5) {
      grid-column: span 1; /* each spans one column */
      grid-row: span 1; /* each spans one row */
    }

    .grid-container-custom a {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .image-element {
      width: 100%;
      height: 100%; /* maintain aspect ratio */
      transition: filter 0.5s ease-out;
    }

    .insidetext {
      display: none;
      position: absolute;
      align-items: center;
      justify-content: center;
      color: rgb(233, 226, 226);
      z-index: 2;
      transition: filter 0.5s ease-out;
    }

    .customlink:hover .insidetext {
      display: flex;
      color: rgb(233, 226, 226);
      transition: ease-in 1s;
    }

    .customlink:hover .image-element {
      filter: brightness(60%);
      transition: ease-in 0.3s;
    }

    @media screen and (max-width: 600px) {
      .grid-container-custom {
       display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: auto;
      gap: 5px;
      height: 100%;
      place-item:center;
      width: 100vw;
      }

      /* The first anchor element now takes up the full width */
      .grid-container-custom a:nth-of-type(1) {
        grid-column: 1/3;
        grid-row: 1;
      }

      /* Each of the next four anchor elements takes up full width, one after another */
      .grid-container-custom a:nth-of-type(2) {
            grid-column: 2/3;
      grid-row: 2;
      }
      .grid-container-custom a:nth-of-type(3) {
            grid-column: 2/3;
      grid-row: 3;
      }
      .grid-container-custom a:nth-of-type(4) {
            grid-column: 1/2;
      grid-row: 3;
      }
      .grid-container-custom a:nth-of-type(5) {
        grid-column: 1;
        grid-row: auto; /* places each one in the next available row slot */
      }
    }
  </style>
/* END_SECTION:custom-image-grid */