/** Shopify CDN: Minification failed

Line 20:8 Expected identifier but found whitespace
Line 20:10 Unexpected "{"
Line 20:19 Expected ":"
Line 20:37 Expected ":"
Line 26:13 Expected identifier but found whitespace
Line 26:15 Unexpected "{"
Line 26:24 Expected ":"
Line 26:42 Expected ":"
Line 27:4 Unexpected "{"
Line 27:5 Expected identifier but found "%"
... and 48 more hidden warnings

**/


/* CSS from section stylesheet tags */
.layout-wrapper {
    gap: {{ section.settings.gap }}px;
    font-family: 'Roboto', sans-serif;
  }

  .layout-wrapper.grid {
    display: grid;
    grid-gap: {{ section.settings.gap }}px;
    {% if section.settings.row_alignment %}
      align-items: {{ section.settings.row_alignment }};
    {% endif %}
    {% if section.settings.column_alignment %}
      justify-items: {{ section.settings.column_alignment }};
    {% endif %}
  }

  .layout-wrapper.flex {
    display: flex;
    flex-wrap: wrap;
    gap: {{ section.settings.gap }}px;
    {% if section.settings.row_alignment %}
      align-items: {{ section.settings.row_alignment }};
    {% endif %}
    {% if section.settings.column_alignment %}
      justify-content: {{ section.settings.column_alignment }};
    {% endif %}
  }

  .layout-column {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    width: 100%;
  }

  .layout-wrapper.flex .layout-column {
    flex: 1 0 calc(100% / var(--columns));
  }

  .column-block {
    margin-bottom: 15px;
  }

  iframe,
  video {
    width: 100%;
    max-width: 100%;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

/* Desktop View (min-width: 1024px) */
@media (min-width: 1024px) {
  .layout-wrapper.grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: {{ section.settings.gap | default: 20 }}px;
  }

}

/* Tablet View (max-width: 1024px and min-width: 768px) */
@media (max-width: 1024px) and (min-width: 768px) {
  .layout-wrapper.grid {
    display: grid;
    grid-template-columns: repeat(var(--tablet-columns), 1fr); /* Tablet columns setting */
    gap: {{ section.settings.gap | default: 20 }}px;
  }
   .layout-wrapper.flex .layout-column {
    --columns: {{ section.settings.tablet_columns }};
  }
}

/* Mobile View (max-width: 480px) */
@media (max-width: 480px) {
  .layout-wrapper.grid {
    display: grid;
    grid-template-columns: repeat(var(--mobile-columns), 1fr); /* Mobile columns setting */
    gap: {{ section.settings.gap | default: 20 }}px;
  }
   .layout-wrapper.flex .layout-column {
    --columns: {{ section.settings.mobile_columns }}; /* Use tablet column setting */
  }
}