
.section-template__subtitle,
.section-template__title {
    sup {
        font-size: xx-small;
        vertical-align: super;
    }
    &.section-template__title {
        sup {
            font-size: small;
        }
    }
}
html:not([data-version="us"]) {
    section.where-to-buy {
        & > .where-to-buy--inner {
            & > div {
                &:last-child {
                     display: none;
                 }
            }
        }
    }
}
section.where-to-buy {
    --red: 351.75deg 84.75% 43.73%;
    & > div.where-to-buy--inner {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 0 25px;
        position: relative;
        & sup {
            font-size: xx-small;
            vertical-align: super;
        }
        & > div {
            position: relative;
            transition: all 350ms ease-in-out;
            transform-origin: center center;
            transform: scale(1) translateZ(0);
            will-change: transform;
            margin: 10px 0;
            &:after {
                content: '';
                display: block;
                width: 100%;
                height: 100%;
                border: 1px solid hsl(var(--red) / 0.1);
                position: absolute;
                top: 0;
                left: 0;
                transform-origin: center center;
                transform: scale(0.8) translateZ(0);
                opacity: 0;
                background: hsl(var(--red) / 0.0);
                pointer-events: none;
                transition: all 350ms ease-in-out;
                will-change: transform;
            }
            &:hover {
                transform: scale(0.97) translateZ(0);
                &:after {
                    transform: scale(1.05) translateZ(0);
                    background: hsl(var(--red) / 0.05);
                    opacity: 1;
                }
                & h2 {
                    box-shadow: hsl(0 0% 90%) 0px 0px 0px;
                }
                & button {
                    filter: brightness(1.2);
                }
                & img {
                    transform-origin: center center;
                    transform: scale(1.05) translateZ(0);
                }
            }
            & a {
                display: flex;
                flex-direction: column;
                gap: 25px;
                & :where(h2, h4) {
                    margin: 0;
                    text-align: center;
                }
                & h2 {
                    font-size: x-large;
                    font-weight: 600;
                    color: hsl(var(--red));
                    padding: 25px 0;
                    box-shadow: hsl(0 0% 90%) 0px 10px 12px;
                    transition: all 350ms ease-in-out;
                    border-bottom: 1px solid hsl(var(--red));
                }
                & h4 {
                    font-size: large;
                    text-wrap: balance;
                    font-weight: normal;
                    color: initial;
                    min-height: 80px;
                    display: flex;
                    align-items: center;
                    text-align: center;
                      justify-content: center;
                }
                & picture {
                    display: block;
                    width: 100%;
                    height: 400px;
                    background: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
                    overflow: hidden;
                    img {
                        display: block;
                        width: 100%;
                        min-height: 100%;
                        object-fit: cover;
                        image-rendering: -webkit-optimize-contrast;
                        transition: all 350ms ease-in-out;
                        transform-origin: center center;
                        transform: scale(1) translateZ(0);
                    }
                }
                & button {
                    display: block;
                    width: 100%;
                    background: hsl(var(--red));
                    color: white;
                    text-transform: uppercase;
                    font-weight: bold;
                    border: none;
                    padding: 10px 20px;
                    border-radius: 1px;
                    text-align: center;
                    font-size: medium;
                    transition: all 350ms ease-in-out;
                }
            }
        }
    }
}
