@layer addon { .templateBlocks.cta { .splide[data-splide-state="mobile"], .splide[data-splide-state="disabled"] { .splide__list:not(.slides-2, .slides-3, .slides-4) { .item { @media (min-width: 56em) { max-width: calc(50% - var(--gutter)); margin: 0 auto; } @media (--min-fablet) { max-width: calc(50% - var(--gutter)); margin: 0 auto; } } } } @media (min-width: 56em) { .intro { display: grid; grid-template-columns: repeat(12, 1fr); width: 100%; column-gap: var(--gutter); .title, .subTitle, .content { grid-column: 3 / span 8; } } } @media (--min-fablet) { .intro { display: grid; grid-template-columns: repeat(12, 1fr); width: 100%; column-gap: var(--gutter); .title, .subTitle, .content { grid-column: 3 / span 8; } } } .intro { text-align: center; } .splide__list { display: flex; gap: var(--gutter); @media (max-width: 56em) { flex-wrap: wrap; } @media (--max-fablet) { flex-wrap: wrap; } .block { background: var(--gradient); &:before { content: ""; background-image: url('data:image/svg+xml,%3Csvg width=\'302\' height=\'289\' viewBox=\'0 0 302 289\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M102.713 86.2598L150.844 169.611L198.953 86.2598L199.387 85.5098H301.575L300.276 87.7598L250.868 173.362L250.867 173.361L201.552 258.851L152.144 344.476L150.845 346.727L149.545 344.476L100.114 258.851L50.707 173.363L50.7061 173.362L1.29883 87.7598L0 85.5098H102.279L102.713 86.2598ZM53.3037 171.861L102.712 257.35L102.713 257.351L150.844 340.725L198.953 257.351L248.27 171.862H248.271L296.379 88.5098H201.119L152.144 173.362L150.845 175.612L149.546 173.362L100.547 88.5098H5.19531L53.3037 171.861ZM201.551 2.25L152.143 87.7617L150.844 90.0088L149.545 87.7617L100.114 2.25098L98.8135 0H202.851L201.551 2.25ZM150.843 84.0127L197.653 3H104.013L150.843 84.0127Z\' fill=\'white\' fill-opacity=\'0.25\'/%3E%3C/svg%3E%0A'); background-repeat: no-repeat; background-size: contain; position: absolute; width: 300px; height: 350px; top: var(--gutter); right: var(--gutter); @media (max-width: 56em) { width: 120px; height: 136px; right: calc(var(--gutter) / 2); } @media (--max-fablet) { width: 120px; height: 136px; right: calc(var(--gutter) / 2); } } .inner { padding: calc(var(--padding) * 2) var(--padding); gap: var(--gutter); @media (max-width: 56em) { padding: var(--padding); } @media (--max-fablet) { padding: var(--padding); } .intro { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .buttons { align-items: flex-start; .button { color: var(--color-light); } } } } } .splide__pagination { display: none; } } }