@font-face {
    font-family: Artusi;
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("fonts/ArtusiVariable-Regular.ttf") format("truetype")
         tech("variations");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/InterVariable.woff2") format("woff2")
         tech("variations");
}

@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/InterVariable-Italic.woff2") format("woff2")
         tech("variations");
}

/* Variables */

:root {
    --max-inline-size-main: 1440px;
    --max-inline-size-grid: 400px;
    --max-inline-size-paragraph: 38em;
    --max-inline-size-image: calc(var(--max-inline-size-paragraph) * .8
);
    --max-inline-size-icon: 66px;

    --min-inline-size-icon: 44px;

    --size-100: clamp(0.7035rem, 0.8131rem + -0.1414vi, 0.7813rem);
    --size-200: clamp(0.9375, 0.9374rem + 0.0004vi, 0.9377);
    --size-300: 1rem;
    --size-350: clamp(1.125rem, 1.082rem + 0.217vi, 1.25rem);
    --size-400: clamp(1.25rem, 1.207rem + 0.217vi, 1.375rem);
    --size-500: clamp(1.375rem, 1.245rem + 0.652vi, 1.75rem);
    --size-600: clamp(1.625rem, 1.408rem + 1.087vi, 2.25rem);
    --size-700: clamp(2rem, 1.652rem + 1.739vi, 3rem);
    --size-800: clamp(2.5rem, 1.978rem + 2.609vi, 4rem);
    --size-900: clamp(3rem, 2.174rem + 4.13vi, 5.375rem);

    --size-relative-300: clamp(1.1em, 1.048em + 0.261vi, 1.25em);
    --size-relative-400: clamp(1.25em, 1.207em + 0.217vi, 1.375em);

    --size-header: var(--size-400);

    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vi, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vi, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0739rem + 0.2273vi, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vi, 1.875rem);
    --space-l: clamp(2.25rem, 2.1477rem + 0.4545vi, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vi, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vi, 5rem);
    --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vi, 7.5rem);

    --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
    --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
    --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
    --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

    --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);

    --space-header-block: var(--space-xs);
    --space-header-inline: var(--space-m);

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Primitive colors */
    --c-primary: oklch(0.8 0.125 196);
    --c-secondary: oklch(from var(--c-primary) l c calc(h + 20));
    --c-tertiary: oklch(from var(--c-primary) l c calc(h - 20));
    --c-complement: color-mix(in oklch longer hue,
                              var(--c-primary),
                              var(--c-secondary));
    --c-gray: oklch(from var(--c-secondary) l 0.025 h);

    --c-primary-100: color-mix(in oklch, var(--c-primary) 10%, black);
    --c-primary-200: color-mix(in oklch, var(--c-primary) 30%, black);
    --c-primary-300: color-mix(in oklch, var(--c-primary) 50%, black);
    --c-primary-400: color-mix(in oklch, var(--c-primary) 70%, black);
    --c-primary-500: var(--c-primary);
    --c-primary-600: color-mix(in oklch, var(--c-primary) 70%, white);
    --c-primary-700: color-mix(in oklch, var(--c-primary) 50%, white);
    --c-primary-800: color-mix(in oklch, var(--c-primary) 30%, white);
    --c-primary-900: color-mix(in oklch, var(--c-primary) 10%, white);

    --c-secondary-100: color-mix(in oklch, var(--c-secondary) 10%, black);
    --c-secondary-200: color-mix(in oklch, var(--c-secondary) 30%, black);
    --c-secondary-300: color-mix(in oklch, var(--c-secondary) 50%, black);
    --c-secondary-400: color-mix(in oklch, var(--c-secondary) 70%, black);
    --c-secondary-500: var(--c-secondary);
    --c-secondary-600: color-mix(in oklch, var(--c-secondary) 70%, white);
    --c-secondary-700: color-mix(in oklch, var(--c-secondary) 50%, white);
    --c-secondary-800: color-mix(in oklch, var(--c-secondary) 30%, white);
    --c-secondary-850: color-mix(in oklch, var(--c-secondary) 20%, white);
    --c-secondary-900: color-mix(in oklch, var(--c-secondary) 10%, white);

    --c-tertiary-100: color-mix(in oklch, var(--c-tertiary) 10%, black);
    --c-tertiary-200: color-mix(in oklch, var(--c-tertiary) 30%, black);
    --c-tertiary-300: color-mix(in oklch, var(--c-tertiary) 50%, black);
    --c-tertiary-400: color-mix(in oklch, var(--c-tertiary) 70%, black);
    --c-tertiary-500: var(--c-tertiary);
    --c-tertiary-600: color-mix(in oklch, var(--c-tertiary) 70%, white);
    --c-tertiary-700: color-mix(in oklch, var(--c-tertiary) 50%, white);
    --c-tertiary-800: color-mix(in oklch, var(--c-tertiary) 30%, white);
    --c-tertiary-900: color-mix(in oklch, var(--c-tertiary) 10%, white);

    --c-complement-100: color-mix(in oklch, var(--c-complement) 10%, black);
    --c-complement-200: color-mix(in oklch, var(--c-complement) 30%, black);
    --c-complement-300: color-mix(in oklch, var(--c-complement) 50%, black);
    --c-complement-400: color-mix(in oklch, var(--c-complement) 70%, black);
    --c-complement-500: var(--c-complement);
    --c-complement-600: color-mix(in oklch, var(--c-complement) 70%, white);
    --c-complement-700: color-mix(in oklch, var(--c-complement) 50%, white);
    --c-complement-800: color-mix(in oklch, var(--c-complement) 30%, white);
    --c-complement-900: color-mix(in oklch, var(--c-complement) 10%, white);

    --c-gray-100: color-mix(in oklch, var(--c-gray) 10%, black);
    --c-gray-200: color-mix(in oklch, var(--c-gray) 30%, black);
    --c-gray-300: color-mix(in oklch, var(--c-gray) 50%, black);
    --c-gray-400: color-mix(in oklch, var(--c-gray) 70%, black);
    --c-gray-500: var(--c-gray);
    --c-gray-600: color-mix(in oklch, var(--c-gray) 70%, white);
    --c-gray-700: color-mix(in oklch, var(--c-gray) 50%, white);
    --c-gray-800: color-mix(in oklch, var(--c-gray) 30%, white);
    --c-gray-900: color-mix(in oklch, var(--c-gray) 10%, white);

    /* Semantic colors */
    --c-brand-primary: var(--c-primary-700);
    --c-brand-secondary: var(--c-primary-800);
    --c-brand-tertiary: var(--c-primary-300);

    --c-surface-primary: var(--c-secondary-850);
    --c-surface-secondary: color-mix(in oklch,
                                     var(--c-surface-primary) 90%,
                                     var(--c-text-primary));
    --c-surface-tertiary: color-mix(in oklch,
                                     var(--c-surface-primary) 80%,
                                     var(--c-text-primary));
    --c-surface-light: color-mix(in oklch,
                                     var(--c-surface-primary) 50%,
                                     white);

    --c-text-primary: var(--c-secondary-100);
    --c-text-secondary: color-mix(in oklch,
                                  var(--c-text-primary) 80%,
                                  var(--c-surface-primary));
    --c-text-light: color-mix(in oklch, var(--c-text-primary) 2%, white);

    --c-action-primary: var(--c-primary-400);
    --c-action-secondary: color-mix(in oklch,
                                    var(--c-action-primary) 80%,
                                    var(--c-surface-primary));
    --c-action-tertiary: color-mix(in oklch,
                                   var(--c-action-primary) 80%,
                                   var(--c-text-primary));

    --c-accent-primary: var(--c-complement-400);
    --c-accent-secondary: color-mix(in oklch,
                                    var(--c-accent-primary) 80%,
                                    var(--c-surface-primary));
    --c-accent-tertiary: color-mix(in oklch,
                                   var(--c-accent-primary) 80%,
                                   var(--c-text-primary));
    --c-accent-light: oklch(from var(--c-accent-primary)
                            calc(l + 0.08) calc(c + 0.07) h);

    --c-banner-primary: var(--c-primary-100);
    --c-banner-secondary: color-mix(in oklch,
                                    var(--c-banner-primary) 80%,
                                    var(--c-primary-700));
    --c-banner-tertiary: var(--c-tertiary-500);


    --c-backdrop-primary: var(--c-gray-600);

    --c-inactive-primary: var(--c-gray-300);

    --c-shadow: oklch(from var(--c-secondary-100) l c h / 0.25);
}

/* Resets */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scroll-padding-block-start: calc(var(--size-header) * 2 +
                                     var(--space-header-block) * 3);
    scrollbar-gutter: stable;

    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
        interpolate-size: allow-keywords;
    }
}

body {
    margin: 0;
    min-block-size: 100svb;
    background-color: var(--c-backdrop-primary);
    color: var(--c-text-primary);
    font-size: var(--size-300);
    line-height: var(--size-relative-300);
    font-family: "Inter", Helvetica, Arial, sans-serif;
    font-variant-ligatures: discretionary-ligatures;
}

main {
    background-color: var(--c-surface-primary);
}

img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
    vertical-align: middle;
}

figure {
    margin: 0;
}

input, button, textarea, select {
    font: inherit;
}

ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-trim: block;

    > :first-child {
        margin-block-start: 0;
    }

    > :last-child {
        margin-block-end: 0;
    }
}

p {
    max-inline-size: var(--max-inline-size-paragraph);
}

h1, h2, h3, h4, h5, h6 {
    max-inline-size: 19em;
    text-box: trim-both cap alphabetic;
    line-height: var(--size-relative-400);
    font-family: "Artusi", Georgia, serif;
    font-weight: var(--font-weight-semibold);
    text-wrap: balance;

    @media (width >= 768px) {
        font-weight: var(--font-weight-extrabold);
    }
}

h1 {
    font-size: var(--size-700);
}

h2 {
    font-size: var(--size-600);
}

h3 {
    font-size: var(--size-500);
}

h4 {
    font-size: var(--size-400);
}

a {
    color: var(--c-action-primary);
    text-decoration-skip-ink: auto;
}

address {
    font-style: normal;
}

dl {
    dt {
        font-weight: var(--font-weight-semibold);
    }

    dd {
        margin: 0;
    }
}


details {
    overflow: hidden;

    &::details-content {
        block-size: 0;

        @media (prefers-reduced-motion: no-preference) {
            transition-property: content-visibility, block-size;
            transition-duration: 0.2s;
            transition-behavior: allow-discrete;
        }
    }

    &[open]::details-content {
        block-size: auto;
    }

    > summary {
        font-size: var(--size-350);
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        margin-block: var(--space-s);
        margin-inline: 0;

        &::marker {
            color: var(--c-inactive-primary);
        }
    }
}

/* Utility */

.visibility-hidden {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.wrapper {
    max-width: var(--max-inline-size-main);
    margin-inline: auto;
}

.drawer {
    --duration: 0.35s;

    min-block-size: 100dvb;
    min-inline-size: 100dvi;
    z-index: 3;
    transition:
        translate var(--duration) ease-in-out,
        display var(--duration) ease-in-out allow-discrete;

    &[open] {
        translate: 0 0;

        @starting-style {
            translate: 0 -100vb;
        }
    }

    &:not([open]) {
        translate: 0 -100vb;
    }

    dialog& {
        border: 0;
    }
}

button.button {
    cursor: pointer;
}

a.button {
    text-decoration: none;
}

.button {
    display: inline-block;
    min-inline-size: var(--min-inline-size-icon);
    min-block-size: var(--min-inline-size-icon);
    text-align: center;
    font-weight: var(--font-weight-semibold);
    padding-block: 0.625em;
    padding-inline: 1.25em;
    border-radius: 0.8em;
    border: 2px solid transparent;
    box-shadow: 0 0 0.4em var(--c-shadow);

    &:focus-visible {
        outline: 2px solid var(--c-accent-tertiary);
        outline-offset: 2px;
    }
}

.cta-button {
    color: var(--c-text-light);
    background-color: var(--c-action-primary);

    &:hover {
        background-color: var(--c-action-tertiary);
    }
}

.icon-button {
    --c-shadow: transparent;
    background-color: transparent;
    padding: 0;

    svg {
        display: inline;
        vertical-align: middle;
    }
}

/* Header */

.header-wrapper, .menu-drawer {
    background-color: var(--c-brand-primary);
}

.header-wrapper {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--c-brand-tertiary);
}

.header-content {
    padding-block: var(--space-header-block);
    padding-inline: var(--space-header-inline);
}

.header-content {
    display: flex;
    gap: var(--space-m);
    align-items: center;
    justify-content: space-between;
    font-size: var(--size-header);
    font-weight: var(--font-weight-medium);

    .logo, a:not(.button), .icon-button {
        color: var(--c-text-primary);

        &:hover {
            color: var(--c-accent-tertiary);
        }
    }
}

.open-button {
    @media (width >= 768px) {
        display: none;
    }
}

.menu-items {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    flex-grow: 1;

    a:not(.button) {
        text-decoration: none;
        text-underline-position: under;

        &:hover {
            text-decoration: underline solid 15%;
        }
    }
}

.menu-buttons {
    display: flex;
    gap: var(--space-xs);
}

.menu-full {
    display: none;
    gap: var(--space-m);
    flex-grow: 1;

    .menu-buttons {
        margin-inline-start: auto;
    }

    @media (width >= 768px) {
        display: flex;
    }
}

.header-wrapper, .header-content, .menu-drawer {
    width: 100%;
}

.menu-drawer {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding-block: var(--space-header-block);
    padding-inline: 0;

    .close-button {
        margin-inline: var(--space-header-inline);
        align-self: end;
    }

    .menu-items, .menu-buttons {
        margin-inline: var(--space-m);
    }

    .menu-items {
        flex-direction: column;
        align-items: start;
        justify-items: center;
        gap: 0;

        > li {
            display: list-item;
            padding-block: var(--space-m);
            inline-size: 100%;

            &:first-of-type {
                margin-block-start: var(--space-s);
            }

            &:not(:last-of-type) {
                border-bottom: 1px solid var(--c-text-primary);
            }
        }
    }

    .menu-buttons {
        flex-direction: column;;
        margin-block-start: auto;
    }

    :is(.menu-items, .menu-buttons)::before {
        display: block;
        content: "";
        height: 1px;
        inline-size: 100%;
        background-color: var(--c-text-primary);
    }

    .cart-button {
        color: var(--c-text-primary);
        background-color: var(--c-brand-secondary);

        &:hover {
            color: var(--c-text-primary);
            background-color: var(--c-action-secondary);
        }
    }
}

/* Hero banner */

.hero-banner {
    display: grid;
    grid-template-columns: minmax(auto, 1.5fr) repeat(3, 1fr);
    grid-template-rows: minmax(0, 1fr);
    background-color: var(--c-banner-secondary);
    background-image: linear-gradient(to bottom, var(--c-banner-primary),
                                      var(--c-banner-secondary));
    max-block-size: 80svb;
    padding-inline: var(--space-m);
    padding-block: var(--space-xl);
}

.hero-picture {
    grid-area: 1 / 2 / -1 / -1;

    img {
        height: 100%;
        object-fit: scale-down;
        object-position: center center;
        mask-image: linear-gradient(to bottom, transparent, black 10%);
    }
}

.hero-content {
    grid-area: 1 / 1 / -1 / 3;
    place-self: center center;
    z-index: 1;
    color: var(--c-text-light);
    font-weight: var(--font-weight-medium);
    font-size: var(--size-400);
    text-wrap: pretty;

    h1::after {
        display: block;
        content: "";
        margin-block-start: var(--space-s);
        height: 2px;
        inline-size: 100%;
        background-color: oklch(from var(--c-brand-primary)
                                l c h / 0.9);
    }

    p {
        padding-block: var(--space-xs-s);
    }
}

.hero-button {
    color: var(--c-text-primary);
    background-color: var(--c-brand-secondary);
    box-shadow: 0px 0px 1.25em 0.25em
                oklch(from var(--c-banner-tertiary) l c h / 0.2);

    &:hover {
        background-color: var(--c-action-secondary);
    }
}

.hero-border {
    inline-size: 100%;
    /* filter: drop-shadow(1px 8px 4px */
    /*                     oklch(from var(--c-secondary-100) l c h / 0.4)); */
    .border-path {
        fill: var(--c-banner-secondary);
    }
}

/* Footer */

.footer {
    background-color: var(--c-surface-tertiary);
    padding-inline: var(--space-l-xl);
    padding-block: var(--space-s);
}

/* Home page sections */

.main-section {
    padding-block: var(--space-s);
    padding-inline: var(--space-l-xl);

    &:not(:first-of-type) {
        margin-block-start: var(--space-s);
    }

    p:first-of-type:first-line {
        font-weight: var(--font-weight-semibold);
    }
}

.spread-section {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fit,
                                  minmax(min(var(--max-inline-size-grid), 100%), 1fr));

    .section-content {
        align-self: center;
    }

    .section-image {
        justify-self: center;
        max-inline-size: var(--max-inline-size-image);
    }
}

.instructions-section {
    .instruction-figure {
        max-inline-size: var(--max-inline-size-image);
    }

    .instruction-diagram {
        border: 2px solid var(--c-text-primary);
        background-color: var(--c-surface-light);

        .arrow-color {
            path, line {
                stroke: var(--c-accent-light);
            }

            polygon {
                fill: var(--c-accent-light);
            }
        }
    }

    .instruction-caption {
        padding-block: var(--space-s);
    }

    .instruction-number {
        font-weight: var(--font-weight-semibold);
        padding-inline-end: var(--space-3xs);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .animate-scroll-trigger {
        .animate {
            animation: .5s ease-out both;
            animation-play-state: paused;
        }

        &.animate-play .animate {
            animation-play-state: running;
        }

        .animate-enter-left {
            offset-path: url("#offsetPathLeft");
            offset-anchor: left center;
            animation-name: enter-left;
        }

        .animate-enter-right {
            offset-path: url("#offsetPathRight");
            offset-anchor: right center;
            animation-name: enter-right;
        }

        .animate-slide {
            offset-path: url("#arrowPath");
            offset-anchor: center;
            transform-origin: center;
            animation-name: slide;
        }

        .animate-stretch {
            animation-name: stretch;
            transform-origin: center;
        }
    }

    @media not (scripting: enabled) {
        .animate-scroll-trigger .animate {
            animation-play-state: running;
        }
    }

    @supports (timeline-trigger-name: --t) {
        .animate-scroll-trigger {
            timeline-trigger: --t view() contain / cover;
            trigger-scope: --t;

            .animate {
                animation-trigger: --t play-forwards play-backwards;
                animation-play-state: running;
            }
        }
    }

    @keyframes enter-left {
        from {
            offset-distance: 0%;
        }

        to {
            offset-distance: 100%;
        }
    }

    @keyframes enter-right {
        from {
            offset-distance: 100%;
        }

        to {
            offset-distance: 0%;
        }
    }

    @keyframes slide {
        from {
            transform: scale(2) rotate(5deg);
            offset-distance: 0%;
        }
        to {
            transform: scale(1);
            offset-distance: 100%;
        }
    }

    @keyframes stretch {
        from {
            transform: scaleX(1);
        }
        to {
            transform: scaleX(1.5);
        }
    }
}

.keysling-section {
    .section-image img {
        mask-image: linear-gradient(to bottom, transparent, black 10%);
     }
 }

.story-section {
    .section-image {
        img {
            clip-path: circle(50%);
        }
    }
}

.contact-section {
    background-color: var(--c-surface-secondary);
}

/* Products */

.product-name {
    text-transform: uppercase;
    font-size: var(--size-400);
    font-weight: var(--font-weight-semibold);
}

.product-price-wrapper {
    font-weight: var(--font-weight-semibold);
    font-size: var(--size-300);
}

.product-gallery {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit,
                                  min(var(--max-inline-size-grid), 100%));

    .product-summary {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        gap: var(--space-2xs);
        overflow: clip;

        .product-details-button {
            inline-size: fit-content;
        }

        .product-summary-image {
            margin-block-end: 5%;
            transition: scale 0.3s;

            &:hover {
                scale: 1.05;
            }
        }
    }
}

.product-overview-wrapper, product-details-wrapper {
    padding-block-end: var(--space-m);
}

.product-overview-wrapper {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: 1fr;

    .product-info-wrapper {
        padding-inline: var(--space-s);
    }

    .product-image-wrapper {
        max-inline-size: min(70vb, 100%);
        justify-self: center;
    }

    .product-option {
        margin-block: var(--space-s);

        .product-option-header {
            margin-block: var(--space-s);

            .product-option-name {
                font-weight: var(--font-weight-semibold);
            }

            .product-option-value {
                border: 2px dotted var(--c-inactive-primary);
                border-radius: 0.5em;
                padding-inline: var(--space-3xs);
                margin-inline: var(--space-3xs);
            }
        }

        .product-variants-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-xs);

            &:has(.variant-color) {
                display: grid;
                grid-template-columns:
                    repeat(auto-fit,
                           minmax(var(--min-inline-size-icon),
                                  var(--max-inline-size-icon)));
            }

            .product-variant-selector {
                display: block;
                border-radius: 0.6em;
                padding-inline: 0.6em;
                padding-block: 0.2em;
                border: 2px solid transparent;
                overflow: hidden;
                text-decoration: none;

                &.variant-color {
                    padding: 0;

                    svg, svg rect {
                        inline-size: 100%;
                        block-size: 100%;
                    }
                }

                &.selected {
                    border-color: var(--c-accent-secondary);
                }

                &:not(.selected) {
                    opacity: 0.66;
                }

                &:hover, &:focus-visible {
                    border-color: var(--c-accent-primary);
                    opacity: 1;
                }
            }
        }
    }

    @media (width >= 768px) {
        grid-template-columns: 0.6fr 0.4fr;
        padding-block: var(--space-m);
        padding-inline: var(--space-l-xl);

        .product-image-wrapper {
            max-inline-size: 100%;
            justify-self: center;
        }

    }
}

.product-details-wrapper {
    background-color: var(--c-surface-secondary);

    .product-feature-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-m);

        .media-wrapper {
            grid-column: 1 / 2;
            grid-row: 1 / -1;
            align-self: center;
        }

        .product-feature-content {
            grid-column: 2 / 4;
            grid-row: 1 / -1;
        }

        &:nth-child(even) {
            background-color: var(--c-surface-tertiary);

            .media-wrapper {
                grid-column: 3 / 4;
                grid-row: 1 / -1;
            }
            .product-feature-content {
                grid-column: 1 / 3;
                grid-row: 1 / -1;
            }

        }
    }

    .product-specifications {
        background-color: var(--c-surface-tertiary);
        padding-block: var(--space-s);

        dl {
            display: grid;
            gap: var(--space-s);
            grid-template-columns: max-content auto;
        }
    }
}