/** Shopify CDN: Minification failed

Line 10:0 Unexpected "100%"
Line 495:41 Expected identifier but found end of file

**/

us-assets-multicolumn-css.txt

100%
.section-multicolumn {
  overflow: hidden;
}

@media (max-width: 576px) {
  .multicolumn__inner .row {
    gap: 20px;
  }

  .multicolumn:not(.swipe-on-mobile) .multicolumn__column {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.multicolumn__column.carousel__slide {
  margin-bottom: 0;
}

.multicolumn__column .h4 {
  margin-bottom: 10px;
  font-size: 23px;
  font-weight: 400;
  line-height: 25px;
}

.multicolumn__column .h2 {
  margin-bottom: 8px;
}

.multicolumn__column p {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 300;
  line-height: normal;
}

@media screen and (min-width: 768px) {
  .multicolumn__column .h4 {
    margin-bottom: 10px;
    font-size: 28px;
    line-height: 30px;
    font-weight: 500;
  }

  .multicolumn__column p {
    margin-bottom: 20px;
  }

  .multicolumn__column .text-button {
    margin-right: 0;
    font-size: 18px;
  }
}

.multicolumn__image {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  margin-bottom: 28px;
  max-width: 100%;
}

.multicolumn__image--inner {
  position: relative;
  padding-bottom: 80%;
}

.multicolumn__image--inner.aspect-ratio--portrait {
  padding-bottom: 125%;
}
.multicolumn__image--inner.aspect-ratio--landscape {
  padding-bottom: 65%;
}

.multicolumn__image--inner.aspect-ratio--square,
.multicolumn__image--inner.aspect-ratio--circle {
  padding-bottom: 100%;
}

/* ---- Circle image ------------------------------------------------------- */
/* Circles always fill the column so every circle in the row is the same size,
   and they stay centered regardless of the column's text alignment. */
.multicolumn__image--circle {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  overflow: hidden;
}

.multicolumn__image--inner.aspect-ratio--circle {
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}

.multicolumn__image--inner.aspect-ratio--circle img {
  border-radius: 50%;
}

.multicolumn__image--inner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Mobile columns ------------------------------------------------------
   --mobile-col-width drives both the "swipe on mobile" grid and the carousel.
   1 keeps the original 90vw peek. 1.5 / 2.5 / 3.5 show a peek of the next one. */
.multicolumn {
  --mobile-col-width: calc(90vw - 15px);
}

/* Percentages of the row's own width, so cards line up with the section
   heading no matter how wide the container is. */
.multicolumn.mobile-columns--1-5 {
  --mobile-col-width: calc((100% - 8px) / 1.5);
}

.multicolumn.mobile-columns--2 {
  --mobile-col-width: calc((100% - 8px) / 2);
}

.multicolumn.mobile-columns--2-5 {
  --mobile-col-width: calc((100% - 16px) / 2.5);
}

.multicolumn.mobile-columns--3 {
  --mobile-col-width: calc((100% - 16px) / 3);
}

.multicolumn.mobile-columns--3-5 {
  --mobile-col-width: calc((100% - 24px) / 3.5);
}

@media only screen and (max-width: 767px) {
  .multicolumn.swipe-on-mobile .multicolumn__inner > .row {
    display: grid;
    grid-gap: 8px;
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--mobile-col-width), 1fr);
    overflow-x: auto;
    grid-template-columns: repeat(auto-fill, minmax(var(--mobile-col-width), 1fr));
    margin-inline-start: -8px;
    width: calc(100% + 16px);
    padding-inline: 15px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .multicolumn.swipe-on-mobile .multicolumn__inner > .row::-webkit-scrollbar {
    display: none;
  }

  .multicolumn.swipe-on-mobile .multicolumn__inner > .row > .columns {
    padding: 0;
    scroll-snap-stop: always;
  }

  .multicolumn.swipe-on-mobile:not(.mobile-columns--1) .multicolumn__inner > .row > .columns {
    scroll-snap-align: start;
  }
}

.multicolumn.swipe-on-mobile .multicolumn__column {
  margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
  .multicolumn.swipe-on-mobile .multicolumn__column {
    width: var(--mobile-col-width);
  }
}

@media only screen and (max-width: 767px) {
  .multicolumn:not(.swipe-on-mobile).mobile-columns--2 .multicolumn__column {
    flex: 0 0 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }

  .multicolumn:not(.swipe-on-mobile).mobile-columns--3 .multicolumn__column {
    flex: 0 0 calc(33.333% - 14px);
    max-width: calc(33.333% - 14px);
  }
}

/* ---- Card typography per mobile column count -----------------------------
   The heading element is always <h4>, but its class comes from the section's
   "Content heading size" setting (h2/h4/h5/h6), so these rules target the
   element itself — otherwise the global heading class wins and the title
   stays large in a narrow column. */
@media only screen and (max-width: 767px) {
  /* 1.5 and 2 columns: slightly reduced */
  .multicolumn.mobile-columns--1-5 .multicolumn-content h4,
  .multicolumn.mobile-columns--2 .multicolumn-content h4 {
    font-size: var(--mc-title-size, 17px);
    line-height: 21px;
    margin-bottom: 6px;
  }

  .multicolumn.mobile-columns--1-5 .multicolumn-content p,
  .multicolumn.mobile-columns--2 .multicolumn-content p {
    font-size: var(--mc-text-size, 15px);
    line-height: 19px;
    margin-bottom: 8px;
  }

  .multicolumn.mobile-columns--1-5 .multicolumn-content .text-button,
  .multicolumn.mobile-columns--2 .multicolumn-content .text-button {
    font-size: var(--mc-link-size, 14px);
  }

  .multicolumn.mobile-columns--1-5 .multicolumn__image,
  .multicolumn.mobile-columns--2 .multicolumn__image {
    margin-bottom: var(--mc-image-gap, 16px);
  }

  /* 2.5 columns: everything scaled down, description kept */
  .multicolumn.mobile-columns--2-5 .multicolumn-content h4 {
    font-size: var(--mc-title-size, 15px);
    line-height: 18px;
    margin-bottom: 5px;
  }

  .multicolumn.mobile-columns--2-5 .multicolumn-content p {
    font-size: var(--mc-text-size, 13px);
    line-height: 17px;
    margin-bottom: 6px;
  }

  .multicolumn.mobile-columns--2-5 .multicolumn-content .text-button {
    font-size: var(--mc-link-size, 13px);
  }

  .multicolumn.mobile-columns--2-5 .multicolumn__image {
    margin-bottom: var(--mc-image-gap, 12px);
  }

  /* 3 and 3.5 columns: title + link only */
  .multicolumn.mobile-columns--3 .multicolumn-content h4,
  .multicolumn.mobile-columns--3-5 .multicolumn-content h4 {
    font-size: var(--mc-title-size, 14px);
    line-height: 17px;
    margin-bottom: 4px;
  }

  .multicolumn.mobile-columns--3 .multicolumn-content .rte,
  .multicolumn.mobile-columns--3-5 .multicolumn-content .rte {
    display: none;
  }

  .multicolumn.mobile-columns--3 .multicolumn-content .text-button,
  .multicolumn.mobile-columns--3-5 .multicolumn-content .text-button {
    font-size: var(--mc-link-size, 12px);
  }

  .multicolumn.mobile-columns--3 .multicolumn__image,
  .multicolumn.mobile-columns--3-5 .multicolumn__image {
    margin-bottom: var(--mc-image-gap, 10px);
  }

  /* Titles stay to two lines so cards keep a common height */
  .multicolumn.mobile-columns--2-5 .multicolumn-content h4,
  .multicolumn.mobile-columns--3 .multicolumn-content h4,
  .multicolumn.mobile-columns--3-5 .multicolumn-content h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Card text follows the section's "Mobile alignment" setting.
     Untouched for single-column sections so existing pages keep their look. */
  .multicolumn:not(.mobile-columns--1) .multicolumn__inner .row.middle .multicolumn-content {
    text-align: center;
  }

  .multicolumn:not(.mobile-columns--1) .multicolumn__inner .row.left .multicolumn-content {
    text-align: start;
  }

  .multicolumn:not(.mobile-columns--1) .multicolumn__inner .row.right .multicolumn-content {
    text-align: end;
  }

  /* Cards start at the same top edge and text sits directly under the image */
  .multicolumn:not(.mobile-columns--1) .multicolumn__column {
    display: flex;
    flex-direction: column;
    align-self: start;
  }

  .multicolumn:not(.mobile-columns--1) .multicolumn-content > *:last-child {
    margin-bottom: 0;
  }

  /* ---- Alignment fixes for multi-column mobile --------------------------
     1. Each column block renders its image with an inline width taken from
        the uploaded file's pixel size, so images end up narrower than the
        card and never line up with the text or with each other. Force them
        to the card width. !important is needed to beat the inline style. */
  .multicolumn:not(.mobile-columns--1) .multicolumn__image {
    width: 100% !important;
    max-width: 100%;
  }

  /* 2. Flex instead of grid. A grid with auto-flow:column puts its implicit
        tracks outside the RTL scrollable area, so the row opens scrolled to
        the last card with the first one unreachable off-screen. Flex also
        gives every card exactly the same width, which auto-fill did not.
     3. The first card starts flush with the section heading instead of
        hanging past the container edge. */
  .multicolumn.swipe-on-mobile:not(.mobile-columns--1) .multicolumn__inner > .row {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: var(--mc-card-gap, 8px);
    margin-inline: 0;
    width: 100%;
    padding-inline: 0;
    /* The theme's "Mobile alignment" rules put justify-content: flex-end on
       this row. On an RTL scroller that pushes the cards to the end and makes
       the overflow spill past the right edge, where it cannot be scrolled to,
       so the first card is unreachable. A scroller must always start at the
       start edge - the right edge in RTL, the left edge in LTR. */
    justify-content: flex-start;
  }

  .multicolumn.swipe-on-mobile:not(.mobile-columns--1) .multicolumn__column {
    flex: 0 0 var(--mobile-col-width);
    width: auto;
    max-width: none;
  }
}

@media only screen and (max-width: 767px) {
  .multicolumn__inner.display-type--carousel {
    overflow: hidden;
    margin-inline-start: -15px;
    padding-inline: 15px;
    width: calc(100% + 30px);
  }

  .multicolumn__inner.display-type--carousel .multicolumn__column {
    width: var(--mobile-col-width);
  }

  .multicolumn__inner.display-type--carousel .flickity-viewport {
    overflow: visible;
  }
}

.multicolumn.text-center .rte {
  padding: 0 15px;
}

.multicolumn__promo {
  margin-top: 40px;
  display: flex;
  width: 100%;
  background-size: cover;
  background-position: center;
  height: var(--section-height);
}

.multicolumn__promo .rte {
  margin-bottom: 10px;
  text-align: right;
}

@media screen and (min-width: 768px) {
  .multicolumn__promo {
    margin: 0;
    flex: 0 0 66%;
    max-width: 66%;
    height: auto;
  }
}

.background-block__buttons .button:hover {
  color: rgb(255, 255, 255, 0.55);
}

.background-block__buttons .outline:hover {
  color: rgba(93, 102, 111, 0.55);
}

.background-block__content {
  max-width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  width: 100%;
}

.background-block__buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: fit-content;
}

.multicolumn__promo .h5 {
  text-align: right;
}

/* Logical alignment: "Left" means the start of the line, which is the right
   side in Hebrew, matching the rest of the theme's RTL behaviour. */
.multicolumn-content.align--left {
  text-align: start;
}

.multicolumn-content.align--right {
  text-align: end;
}

.multicolumn-content.align--center {
  text-align: center;
}

.multicolumn-align--left {
  justify-content: flex-end;
}

.multicolumn-align--right {
  justify-content: flex-start;
}

.multicolumn-align--center {
  justify-content: center;
}

.vertcal-align--center {
  align-items: center;
}

.vertcal-align--flex-end {
  align-items: flex-end;
}

.vertcal-align--flex-start {
  align-items: flex-start;
}

.multicolumn-align--center .background-block__content {
  align-items: center;
}

.multicolumn-align--left .background-block__content {
  align-items: flex-end;
}

.multicolumn__column--metaobjects .rte {
  font-size: 16px;
  font-weight: 300;
  line-height: normal;
}

@media screen and (max-width: 768px) {
  .align-stretch.middle {
    justify-content: center;
  }

  .align-stretch.right {
    justify-content: flex-start;
  }

  .align-stretch.left {
    justify-content: flex-end;
  }

}

.multicolumn__inner .row {
  row-gap: 20px;
}
Displaying us-assets-multicolumn-css.txt.