.hero {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    min-height: 490px;
    background: #f2eee5;
    margin-top: 12px;
    position: relative;
    overflow: hidden;
    border-radius: 8px
}

.hero-copy {
    padding: 60px 48px 35px 20px;
    position: relative;
    z-index: 2
}

    .hero-copy > .eyebrow {
        display: flex;
        align-items: center;
        gap: 9px;
        font-size: 11px
    }

        .hero-copy > .eyebrow > span {
            width: 23px;
            height: 1px;
            background: var(--copper)
        }

.hero h1 {
    font-size: 57px;
    line-height: 1.55;
    margin: 15px 0 14px;
    letter-spacing: -.7px
}

.hero-copy > p {
    font-size: 12px;
    color: #7b7c70;
    line-height: 2.25
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 28px
}

.hero-secondary {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #aaa796;
    padding: 7px 0
}

    .hero-secondary .icon {
        width: 15px;
        height: 15px
    }

.hero-footnote {
    margin-top: 35px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: #7c7d70
}

    .hero-footnote .icon {
        width: 21px;
        height: 21px;
        color: var(--copper)
    }

    .hero-footnote i {
        font-style: normal;
        padding: 0 12px;
        color: #b8b29e
    }

.hero-scene {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 30% 10%,#fff9ed 0,transparent 60%),linear-gradient(135deg,#e7e1d5,#ddd6c7 75%,#d0c5b2)
}

.scene-arch {
    width: 72%;
    height: 122%;
    border: 1px solid #b6aa952e;
    border-radius: 50% 50% 0 0;
    position: absolute;
    top: 15%;
    left: 16%;
    box-shadow: inset -24px 8px 45px #98896b13
}

.scene-light {
    position: absolute;
    width: 95%;
    height: 150%;
    background: linear-gradient(90deg,transparent,#fff8e756,transparent);
    transform: rotate(-33deg);
    top: -80px;
    left: -42%;
    filter: blur(12px)
}

.scene-label {
    position: absolute;
    top: 27px;
    left: 26px;
    color: #827c6b;
    font: 8px/1.5 Arial,sans-serif;
    letter-spacing: 3px;
    writing-mode: vertical-rl
}

.hero-art {
    position: absolute;
    inset: 28px 44px 20px 76px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-6deg)
}

.art-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    aspect-ratio: 1;
    background: #e9e3d6;
    overflow: hidden;
    width: 100%
}

.art-frame {
    width: 68%;
    aspect-ratio: .86;
    background: linear-gradient(130deg,#573c2b,#30271d 30%,#886243 50%,#30241a 55%,#58432d);
    padding: 12px;
    box-shadow: 10px 15px 18px #2d291b30,2px 2px 2px #231e1970;
    border: 2px solid #58422d;
    position: relative
}

.art-inner {
    position: relative;
    background: radial-gradient(ellipse at 25% 20%,#214638,#102c25 70%);
    width: 100%;
    height: 100%;
    border: 2px solid #b38b57;
    box-shadow: inset 0 0 0 7px #193529,inset 0 0 0 8px #806342;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

    .art-inner > img {
        width: 112%;
        max-width: none;
        opacity: .78;
        position: absolute;
        inset: 0;
        height: 100%;
        object-fit: contain
    }

.art-script {
    font-family: var(--heading-font);
    font-size: 44px;
    line-height: 1.5;
    color: #e0b98a;
    z-index: 1;
    text-align: center;
    text-shadow: 1px 2px #62462e,-1px -1px #f3d2a636;
    background: radial-gradient(ellipse,#143328 32%,#143328e0 52%,transparent 70%);
    padding: 25px 10px;
    white-space: nowrap
}

.hero-art > .art-stage {
    background: transparent;
    overflow: visible;
    height: 100%;
    aspect-ratio: auto
}

.hero-art .art-frame {
    width: 85%;
    max-width: 323px;
    aspect-ratio: .82;
    padding: 13px;
    box-shadow: 19px 22px 20px #51412b45,3px 3px 2px #201d18a0
}

.hero-art .art-script {
    font-size: 77px;
    line-height: 1.2;
    letter-spacing: -3px;
    padding: 25px
}

.hero-art .art-inner > img {
    opacity: .9
}

.scene-plinth {
    height: 55px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(170deg,#e7dfd2 0 15%,#c6b9a3 16%,#e1d7c7 20%,#d7ccba);
    box-shadow: 0 -15px 40px #8e7f6220
}

.scene-vase {
    position: absolute;
    bottom: 44px;
    left: 24px;
    width: 64px;
    height: 84px;
    border-radius: 25% 25% 40% 40%;
    background: linear-gradient(90deg,#b19f82,#e1d4bb 40%,#c7b493 80%,#9e8b6d);
    box-shadow: 9px 5px 10px #4e3e2930;
    transform: rotate(-4deg)
}

    .scene-vase:before {
        content: '';
        position: absolute;
        top: -3px;
        left: 15px;
        width: 34px;
        height: 8px;
        border-radius: 50%;
        background: #847357;
        box-shadow: 0 0 0 3px #cab998
    }

    .scene-vase span, .scene-vase i, .scene-vase b {
        display: block;
        position: absolute;
        bottom: 75px;
        left: 33px;
        height: 140px;
        width: 1px;
        background: #776e43;
        transform: rotate(-20deg);
        transform-origin: bottom
    }

    .scene-vase i {
        height: 172px;
        transform: rotate(12deg)
    }

    .scene-vase b {
        height: 122px;
        transform: rotate(35deg)
    }

        .scene-vase span:before, .scene-vase i:before, .scene-vase b:before {
            content: '';
            width: 15px;
            height: 55px;
            position: absolute;
            top: 5px;
            left: -10px;
            border-radius: 100% 0 100% 0;
            background: #8a885e;
            box-shadow: 12px 28px 0 #a7a079,-3px 52px 0 #939367;
            transform: rotate(-15deg)
        }

.art-caption {
    position: absolute;
    bottom: 40px;
    right: 35px;
    background: #fdfbf7ed;
    border: 1px solid #fff8;
    padding: 13px 17px;
    border-radius: 6px;
    box-shadow: 0 10px 25px #40391d12;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 230px
}

.caption-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--copper)
}

.art-caption strong {
    display: block;
    font-size: 13px;
    font-weight: 400
}

.art-caption small {
    font-size: 9px;
    color: var(--muted)
}

.art-caption a {
    margin-right: auto;
    width: 30px;
    height: 36px;
    display: grid;
    place-items: center
}

    .art-caption a .icon {
        width: 19px
    }

.scene-index {
    position: absolute;
    bottom: 12px;
    left: 24px;
    right: 35px;
    font-size: 8px;
    color: #736d5e;
    display: flex;
    justify-content: space-between
}

    .scene-index b {
        font-weight: 400;
        letter-spacing: 2px
    }

.categories {
    padding: 50px 0 45px
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 16px
}

.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 6px
}

.category-icon {
    width: 67px;
    height: 67px;
    background: #f2eee5;
    border: 1px solid #e8e2d5;
    border-radius: 20px;
    display: grid;
    place-items: center;
    color: #917958;
    transition: transform .2s,background .2s
}

    .category-icon .icon {
        width: 30px;
        height: 30px;
        stroke-width: 1.25
    }

.category-item:hover .category-icon {
    transform: translateY(-5px);
    background: #e9dfce
}

.category-item strong {
    font-weight: 400;
    font-size: 13px;
    margin-top: 12px
}

.category-item small {
    font-size: 9px;
    color: var(--muted);
    margin-top: 3px
}

.selected-section {
    padding: 42px 0 48px;
    background: #f5f2ec;
    border-block: 1px solid #efebe2
}

.collection-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px
}

.filter-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: auto;
    scrollbar-width: none
}

    .filter-tabs button {
        padding: 8px 17px;
        min-height: 40px;
        font-size: 11px;
        border-radius: 4px;
        white-space: nowrap;
        border: 1px solid transparent;
        color: #7c7d70
    }

        .filter-tabs button.is-active {
            background: var(--forest);
            color: #fff
        }

        .filter-tabs button:not(.is-active):hover {
            border-color: #c7c6b9;
            color: var(--forest)
        }

.sample-note {
    font-size: 9px;
    color: #8d8d80
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px;
    align-items: start
}

.product-card {
    min-width: 0
}

.product-visual {
    position: relative;
    overflow: hidden;
    border-radius: 5px
}

    .product-visual > a {
        display: block
    }

    .product-visual .art-stage {
        transition: transform .4s
    }

    .product-visual > a:hover .art-stage {
        transform: scale(1.04)
    }

    .product-visual .art-frame {
        width: 60%;
        transform: rotate(-3deg);
        padding: 8px
    }

    .product-visual .art-script {
        font-size: 30px;
        padding: 22px 8px
    }

.product-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    padding: 3px 9px;
    background: #fdfbf7df;
    color: #586452;
    border-radius: 3px;
    font-size: 8px
}

.favorite {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #fff9;
    width: 33px;
    height: 33px;
    color: #656b5b
}

    .favorite .icon {
        width: 17px;
        height: 17px
    }

    .favorite[aria-pressed=true] {
        color: var(--copper);
        background: #fff
    }

        .favorite[aria-pressed=true] .icon {
            fill: #b36e4325
        }

.product-info {
    padding: 16px 2px 0
}

.product-material {
    font-size: 9px;
    color: #8b887a
}

.product-info h3 {
    font-weight: 400;
    font-size: 13px;
    margin: 6px 0 13px;
    line-height: 1.8
}

.product-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e4dfd2;
    padding-top: 12px;
    font-size: 13px
}

    .product-price small {
        font-size: 9px;
        color: #7c8073
    }

    .product-price b {
        font-weight: 400;
        padding: 0 3px
    }

.product-arrow {
    width: 30px;
    height: 30px;
    border: 1px solid #dfddd1;
    border-radius: 50%;
    display: grid;
    place-items: center
}

    .product-arrow .icon {
        width: 15px;
        height: 15px
    }

.patina {
    background: #dce1d9
}

    .patina .art-inner {
        background: radial-gradient(ellipse,#568578,#234b40 70%)
    }

    .patina .art-script {
        background: radial-gradient(ellipse,#467367 30%,#416d61b0 50%,transparent 70%);
        color: #d2b287
    }

    .patina .art-frame {
        transform: rotate(3deg)
    }

.wood {
    background: #e4d5c1
}

    .wood .art-frame {
        width: 57%;
        aspect-ratio: 1;
        padding: 8px;
        background: linear-gradient(90deg,#634021,#b88751,#674526);
        transform: rotate(-4deg)
    }

    .wood .art-inner {
        background: radial-gradient(ellipse,#be9569,#9e7348);
        border-color: #5e4127;
        box-shadow: inset 0 0 0 5px #b18250,inset 0 0 0 6px #69452a
    }

        .wood .art-inner > img {
            opacity: .5;
            filter: brightness(.35)
        }

    .wood .art-script {
        background: radial-gradient(ellipse,#b58b5e 35%,transparent 70%);
        color: #4a2d19;
        text-shadow: 1px 1px #ddbd8d;
        font-size: 44px
    }

.tile {
    background: #dce6e3
}

    .tile .art-frame {
        aspect-ratio: 1;
        padding: 10px;
        background: linear-gradient(135deg,#b59c76,#ebe0c9,#ac9068);
        border-color: #baa681;
        transform: rotate(4deg)
    }

    .tile .art-inner {
        background: radial-gradient(ellipse,#3c8f96,#174f5e);
        box-shadow: inset 0 0 0 5px #e2d6b1,inset 0 0 0 8px #227783;
        border-color: #dbceac
    }

        .tile .art-inner > img {
            opacity: 1;
            filter: brightness(1.35)
        }

    .tile .art-script:empty {
        display: none
    }

.story-section {
    padding-block: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
}

.story-art {
    height: 285px;
    position: relative;
    overflow: hidden;
    background: #24473c;
    border-radius: 4px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    padding: 35px;
    color: #ecdbc1
}

    .story-art img {
        position: absolute;
        width: 360px;
        height: 360px;
        right: -80px;
        top: -37px;
        opacity: .66;
        transform: rotate(15deg)
    }

    .story-art > span {
        font-family: var(--heading-font);
        font-size: 38px;
        position: relative
    }

    .story-art small {
        font-size: 10px;
        margin-top: 12px;
        position: relative;
        color: #b3c1ad
    }

.story-copy h2 {
    font-size: 36px;
    line-height: 1.6
}

.story-copy p {
    font-size: 12px;
    line-height: 2.3;
    color: var(--muted);
    margin: 17px 0 23px;
    max-width: 450px
}

.topics {
    padding:10px 0 40px 0;
}

.topic-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 23px
}

.topic-card {
    min-height: 170px;
    padding: 23px;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    position: relative;
    overflow: hidden;
    border-radius: 5px
}

.topic-faith {
    background: #e7e9df
}

.topic-poem {
    background: #eee2d4
}

.topic-nature {
    background: #e2e9e5
}

.topic-card > span:not(.topic-art) {
    position: relative;
    z-index: 1
}

.topic-card small {
    display: block;
    font-size: 10px;
    color: #737a65;
    margin-bottom: 7px
}

.topic-card strong {
    font-weight: 400;
    font-family: var(--heading-font);
    font-size: 25px
}

.topic-card > .icon {
    margin-right: auto;
    width: 19px;
    margin-bottom: 7px
}

.topic-art {
    position: absolute;
    left: 35px;
    top: -20px;
    font-family: var(--heading-font);
    font-size: 115px;
    color: #78836a;
    opacity: .17;
    transform: rotate(-14deg)
}

.topic-poem .topic-art {
    color: #a16944
}

.topic-art > .icon {
    width: 155px;
    height: 155px;
    stroke-width: .5;
    transform: rotate(18deg)
}

.topic-card:hover {
    filter: brightness(.98)
}

.custom-section {
    background: var(--forest);
    border-radius: 7px;
    padding: 35px;
    display: flex;
    align-items: center;
    gap: 25px;
    color: var(--paper);
    position: relative;
    overflow: hidden;
    margin: 20px auto;
}

    .custom-section .eyebrow {
        color: #d9b387
    }

    .custom-section h2 {
        font-size: 28px
    }

    .custom-section p {
        font-size: 11px;
        color: #b9c7bc;
        margin-top: 10px
    }

    .custom-section > .button {
        margin-right: auto;
        flex-shrink: 0;
        font-size: 11px
    }

.custom-icon {
    width: 65px;
    height: 65px;
    border: 1px solid #a8b39740;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #d9b387;
    flex-shrink: 0
}

    .custom-icon .icon {
        width: 28px;
        height: 28px
    }

.values {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    padding-block: 43px;
    gap: 25px
}

    .values > div {
        display: flex;
        align-items: center;
        gap: 15px;
        justify-content: center
    }

    .values .icon {
        width: 29px;
        height: 29px;
        color: #b39470;
        stroke-width: 1.3
    }

    .values strong {
        font-weight: 400;
        display: block;
        font-size: 12px
    }

    .values small {
        font-size: 9px;
        color: var(--muted)
    }

.empty-results {
    padding: 40px;
    text-align: center;
    color: var(--muted)
}

@media(max-width:1100px) {
    .hero-copy {
        padding: 40px 30px 25px 15px
    }

    .hero h1 {
        font-size: 47px
    }

    .hero-actions {
        gap: 13px
    }

        .hero-actions .button {
            padding-inline: 15px;
            gap: 15px
        }

    .hero {
        min-height: 460px
    }

    .hero-art {
        inset: 40px 30px 35px 60px
    }

        .hero-art .art-script {
            font-size: 60px
        }

    .story-section {
        gap: 45px
    }

    .custom-section {
        padding: 28px;
        gap: 18px
    }

        .custom-section h2 {
            font-size: 25px
        }

    .custom-icon {
        display: none
    }

    .product-grid {
        gap: 15px
    }

    .topic-card {
        padding: 20px
    }

        .topic-card strong {
            font-size: 23px
        }
}

@media(max-width:800px) and (min-width:701px) {
    .hero h1 {
        font-size: 39px
    }

    .hero-copy {
        padding: 35px 24px 20px 10px
    }

    .hero-secondary {
        display: none
    }

    .hero-art .art-frame {
        width: 100%
    }

    .product-info h3 {
        font-size: 11px
    }

    .product-price {
        font-size: 11px
    }

    .product-visual .art-script {
        font-size: 24px
    }

    .custom-section {
        flex-wrap: wrap
    }

    .values {
        gap: 12px
    }

        .values > div {
            gap: 8px
        }

        .values strong {
            font-size: 10px
        }
}

@media(max-width:700px) {
    .hero {
        grid-template-columns: 1fr;
        margin-top: 5px;
        border-radius: 10px;
        min-height: 0
    }

    .hero-copy {
        padding: 27px 25px 21px
    }

        .hero-copy > .eyebrow {
            font-size: 9px
        }

    .hero h1 {
        font-size: 43px;
        line-height: 1.45;
        margin: 13px 0 12px
    }

    .hero-copy > p {
        font-size: 11px;
        line-height: 2
    }

    .hero-actions {
        margin-top: 22px;
        gap: 20px
    }

        .hero-actions .button {
            min-height: 43px;
            padding: 9px 15px;
            gap: 15px;
            font-size: 11px
        }

    .hero-secondary {
        font-size: 10px;
        gap: 7px
    }

    .hero-footnote {
        display: none
    }

    .hero-scene {
        height: 310px
    }

    .hero-art {
        inset: 13px 25px 9px 67px
    }

        .hero-art .art-frame {
            width: 197px;
            max-width: 75%;
            padding: 9px;
            aspect-ratio: .86
        }

        .hero-art .art-script {
            font-size: 48px;
            letter-spacing: -1px;
            padding: 15px
        }

        .hero-art .art-inner > img {
            width: 108%
        }

    .scene-label {
        top: 20px;
        left: 15px;
        font-size: 6px;
        letter-spacing: 2px
    }

    .scene-arch {
        width: 63%;
        left: 20%;
        top: 10%
    }

    .scene-plinth {
        height: 40px
    }

    .art-caption {
        right: 20px;
        bottom: 28px;
        min-width: 184px;
        padding: 8px 12px;
        gap: 8px
    }

        .art-caption strong {
            font-size: 11px
        }

        .art-caption small {
            font-size: 8px
        }

        .art-caption a {
            height: 28px
        }

    .scene-index {
        bottom: 6px;
        right: 20px;
        left: 18px;
        font-size: 7px
    }

    .scene-vase {
        left: 22px;
        bottom: 31px;
        width: 43px;
        height: 58px
    }

        .scene-vase:before {
            left: 10px;
            width: 23px;
            height: 6px
        }

        .scene-vase span, .scene-vase i, .scene-vase b {
            bottom: 50px;
            left: 22px;
            height: 90px
        }

        .scene-vase i {
            height: 114px
        }

        .scene-vase b {
            height: 81px
        }

            .scene-vase span:before, .scene-vase i:before, .scene-vase b:before {
                width: 10px;
                height: 30px;
                box-shadow: 7px 20px 0 #a7a079,-3px 35px 0 #939367
            }

    .categories {
        padding: 32px 0 24px
    }

    .category-grid {
        grid-template-columns: repeat(3,1fr);
        gap: 8px 12px
    }

    .category-item {
        padding: 10px 0
    }

    .category-icon {
        width: 55px;
        height: 55px;
        border-radius: 17px
    }

        .category-icon .icon {
            width: 26px;
            height: 26px
        }

    .category-item strong {
        font-size: 11px;
        margin-top: 9px
    }

    .category-item small {
        font-size: 8px
    }

    .selected-section {
        padding: 30px 0
    }

    .collection-toolbar {
        margin-bottom: 20px;
        display: block
    }

    .filter-tabs {
        gap: 5px;
        margin-inline: -18px;
        padding-inline: 18px
    }

        .filter-tabs button {
            font-size: 10px;
            padding: 7px 13px;
            min-height: 38px
        }

    .sample-note {
        display: block;
        font-size: 8px;
        margin-top: 13px
    }

    .product-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 25px 13px
    }

    .product-visual .art-frame {
        width: 65%;
        padding: 5px;
        border-width: 1px
    }

    .product-visual .art-inner {
        border-width: 1px;
        box-shadow: inset 0 0 0 3px #193529,inset 0 0 0 4px #806342
    }

    .product-visual .art-script {
        font-size: 23px;
        padding: 14px 5px
    }

    .favorite {
        width: 30px;
        height: 30px;
        top: 6px;
        left: 6px
    }

    .product-badge {
        font-size: 7px;
        bottom: 7px;
        right: 7px;
        padding: 2px 5px
    }

    .product-info {
        padding-top: 10px
    }

    .product-material {
        font-size: 8px
    }

    .product-info h3 {
        font-size: 10px;
        margin: 5px 0 10px
    }

    .product-price {
        font-size: 11px;
        padding-top: 8px
    }

        .product-price small {
            font-size: 8px
        }

        .product-price b {
            padding: 0
        }

    .product-arrow {
        width: 24px;
        height: 24px
    }

        .product-arrow .icon {
            width: 12px
        }

    .story-section {
        padding-block: 38px;
        grid-template-columns: 1fr;
        gap: 27px
    }

    .story-art {
        height: 220px;
        padding: 26px
    }

        .story-art img {
            width: 280px;
            height: 280px;
            right: -60px;
            top: -30px
        }

        .story-art > span {
            font-size: 32px
        }

    .story-copy h2 {
        font-size: 31px
    }

    .story-copy p {
        font-size: 11px;
        margin: 12px 0 18px
    }

    .topics {
        padding-bottom: 35px
    }

    .topic-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .topic-card {
        min-height: 119px;
        padding: 20px 23px
    }

        .topic-card strong {
            font-size: 25px
        }

        .topic-card small {
            font-size: 9px;
            margin-bottom: 4px
        }

    .topic-art {
        font-size: 105px;
        top: -35px;
        left: 55px
    }

        .topic-art > .icon {
            width: 142px;
            height: 142px
        }

    .custom-section {
        padding: 27px 24px;
        display: block
    }

        .custom-section h2 {
            font-size: 28px;
            line-height: 1.6;
            max-width: 300px
        }

        .custom-section p {
            font-size: 10px;
            line-height: 2.2;
            margin: 12px 0 23px
        }

        .custom-section > .button {
            font-size: 10px;
            min-height: 43px
        }

    .values {
        grid-template-columns: 1fr 1fr;
        gap: 25px 15px;
        padding-block: 31px
    }

        .values > div {
            gap: 10px;
            justify-content: flex-start
        }

        .values strong {
            font-size: 10px
        }

        .values small {
            font-size: 8px
        }

        .values .icon {
            width: 25px;
            height: 25px
        }
}

@media(max-width:370px) {
    .hero-copy {
        padding-inline: 19px
    }

    .hero h1 {
        font-size: 38px
    }

    .hero-actions {
        gap: 12px
    }

        .hero-actions .button {
            font-size: 10px;
            gap: 8px
        }

    .hero-secondary {
        font-size: 9px
    }

    .section-heading h2, .section-heading.compact h2 {
        font-size: 22px
    }

    .section-heading .text-link {
        font-size: 9px
    }

    .product-price {
        font-size: 10px
    }

    .product-info h3 {
        font-size: 9px
    }

    .hero-scene {
        height: 280px
    }

    .hero-art .art-frame {
        width: 181px
    }
}