/* Main Configuration */
@layer configuration {
*,*::before,*::after {
    box-sizing      : border-box;
    padding         : 0;
    margin          : 0;
    background      : none;
    text-decoration : none;
    outline         : none;
    font-family     : inherit;
    font-size       : inherit;
    line-height     : inherit;
    font-weight     : inherit;
    color           : inherit;

    /* Disable double tap to zoom */
    touch-action : manipulation;

    /* Fix the antialias when needed */
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "onum", "kern", "liga", "clig", "calt";

    /* Global Transitions */
    transition-delay           : 0ms;
    transition-duration        : 150ms;
    transition-property        : none;
    transition-timing-function : ease-out ;
}
}
@layer configuration {

@font-face {
    font-display : swap;
    font-family  : 'PF';
    font-style   : normal;
    font-weight  : 400;
    src          : url('fonts/pf-400.woff2') format('woff2');
}

@font-face {
    font-display : swap;
    font-family  : 'PF';
    font-style   : italic;
    font-weight  : 400;
    src          : url('fonts/pf-400i.woff2') format('woff2');
}

@font-face {
    font-display : swap;
    font-family  : 'PF';
    font-style   : normal;
    font-weight  : 500;
    src          : url('fonts/500.woff2') format('woff2');
}

@font-face {
    font-display : swap;
    font-family  : 'DM';
    font-style   : normal;
    font-weight  : 400;
    src          : url('fonts/dm-400.woff2') format('woff2');
}

@font-face {
    font-display : swap;
    font-family  : 'DM';
    font-style   : normal;
    font-weight  : 500;
    src          : url('fonts/dm-500.woff2') format('woff2');
}

@font-face {
    font-display : swap;
    font-family  : 'DM';
    font-style   : normal;
    font-weight  : 600;
    src          : url('fonts/dm-600.woff2') format('woff2');
}

@font-face {
    font-display : swap;
    font-family  : 'DM';
    font-style   : normal;
    font-weight  : 700;
    src          : url('fonts/dm-700.woff2') format('woff2');
}

:root {
    
    /* Colors */
    --background : hsl(0,0%,100%);
    --text       : hsl(0,0%,0%);

    /* Main Colors */
    --gray      : #e4e3e7;
    --gray-dark : #a59898;
    --orange    : #f15a24;
    --black     : #000000;
    --white     : #ffffff;


    /* Font Settings */
    --font-family : sans-serif;
    --font-size   : 14px;
    --font-height : 22px;
    --font-weight : 400;


    /* All the font variations we'll need to use across the site */
    --font-base-sans     : 400 clamp(15px, 0.45vi + 8.64px, 20px) / 1.33 DM;
    --font-base-sans-500 : 500 clamp(15px, 0.45vi + 8.64px, 20px) / 1.33 DM;
    --font-base-sans-600 : 600 clamp(15px, 0.45vi + 8.64px, 20px) / 1.33 DM;
    --font-base-serif    : 400 clamp(15px, 0.45vi + 8.64px, 20px) / 1.33 PF;

    --font-mid-serif : 400 clamp(20px, 0.42vi + 14.58px, 25px) / 1.33 PF;

    --font-mid-sans : 400 clamp(20px, 0.42vi + 14.58px, 25px) / 1.33 DM;

    /* Small Font */
    --font-small-sans     : 400 clamp(12px, 0.27vi + 8.18px, 15px) / 1.33 DM;
    --font-small-sans-300 : 300 clamp(12px, 0.27vi + 8.18px, 15px) / 1.33 DM;
    --font-small-sans-600 : 600 clamp(12px, 0.27vi + 8.18px, 15px) / 1.33 DM;

    /* Big Font */
    --font-big-sans  : 400 clamp(35px, 3.18vi + -9.55px, 70px) / 1 DM;
    --font-big-serif : 400 clamp(40px, 5vi + -30px, 95px) / 1 PF;

    --font-huge-sans  : 400 clamp(40px, 5vi + -30px, 95px) / 1 DM;

    /* Set the defaults */
    font-size   : var(--font-size);
    font-family : var(--font-family);
    font-weight : var(--font-weight);
    background  : var(--background);
    color       : var(--text);

    /* We need to set a few base parameters */
    font-size   : clamp(15px, 0.45vi + 8.64px, 20px);
    line-height : clamp(20px, 0.45vi + 13.64px, 25px);

    /* Grid Variables */
    --grid-template-columns : repeat(6,1fr);
    --gap                   : 0.5rlh;

    /* Layout Spacers */
    --side-padding : 1rlh;

    @media (width > 700px) {
        --grid-template-columns : repeat(12,1fr);
        --gap                   : 1rlh;
        --side-padding          : 3rlh;
    }

}

body {
    background : var(--gray);
}

html,body {
    scroll-behavior : smooth;
    scroll-padding  : 4rlh;
}
}/* Global Settings *//* The Overlay Grid */
.overlay-grids {
    position              : absolute;
    inset                 : 0;
    padding               : 0 var(--side-padding);
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : 0 var(--gap);
    pointer-events        : none;
    background            : repeating-linear-gradient(to bottom, transparent, transparent 1rlh, rgba(0,0,255,.1) 1rlh 2rlh);
    z-index               : 99999999;
    display: none;
}
.grid-is-hidden .overlay-grids {
    display: none;
}
.overlay-grids div {
    border-right : 2px solid blue;
    border-left  : 2px solid blue;
    opacity      : .2;
}/* UI Elements *//* Site's Header */
.header {
    position              : fixed;
    inset                 : 0 0 auto 0;
    padding               : 2rlh var(--side-padding) 1rlh;
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    grid-template-areas   : "logo logo logo . button button";
    background            : var(--gray);
    border-bottom         : 1px solid #a59898;
    align-items           : end;
    align-content         : baseline;
    z-index               : 5000;
}
@media (width > 700px) { .header { grid-template-areas : "logo logo logo contacts contacts . . langs langs langs button button"; } }
@media (width > 1000px) { .header { grid-template-areas : "logo logo contacts contacts . . . . . langs langs button"; } }/* Back to home link */
.header-home-link {
    display      : block;
    grid-area    : logo;
    align-self   : end;
    justify-self : start;
}/* The Logo */
.header-logo {
    height  : 1.25rlh;
    width   : auto;
    display : block;
}
@media (width > 700px) {
    .header-logo {
        height : 1rlh;
    }
}/* Contacts Link */
.header-contacts {
    font           : var(--font-small-sans-300);
    text-transform : uppercase;
    letter-spacing : 0.05em;
    grid-area      : contacts;
    justify-self   : start;
}/* Languages Menu */
.header-languages {
    grid-area    : langs;
    justify-self : end;
    display      : flex;
    gap          : var(--gap);
}
.header-language {
    font           : var(--font-small-sans-300);
    text-transform : uppercase;
    letter-spacing : 0.05em;
}
.header-language.active,
.header-contacts:hover,
.header-language:hover{
    font                  : var(--font-small-sans-600);
    text-decoration       : underline;
    text-underline-offset : 4px;
}/* Menu Button */
.header-button {
    grid-area     : button;
    border        : none;
    height        : 1rlh;
    cursor        : pointer;
    display       : flex;
    flex-direction : column;
    justify-content: space-evenly;


    &::after,
    &::before {
        content             : "";
        width               : 100%;
        height              : 1px;
        background          : #000;
        transition-property : transform;
    }

}/* Mobile Adaptation */
@media (width <= 700px) {
    .header-languages { display : none; }
    .header-contacts { display : none; }
}/* Main Navigation */
.main-navigation {
    position                   : fixed;
    inset                      : 0;
    padding                    : 0 var(--side-padding);
    display                    : grid;
    grid-template-columns      : var(--grid-template-columns);
    gap                        : var(--gap);
    background                 : var(--gray);
    grid-template-areas        : "links links links links links links" "extra extra extra extra extra extra";
    z-index                    : 4000;
    transition-property        : opacity, transform;
    transition-duration        : 250ms;
    transition-timing-function : ease-out;
    transform                  : translateY(-100vh);
    opacity                    : 0;
    pointer-events             : none;
    align-content              : start;
}
@media (width > 700px) { .main-navigation { align-content : stretch; grid-template-areas : "links links links links links links extra extra extra extra extra extra"; } }
@media (width > 900px) { .main-navigation { grid-template-areas : ". . . . links links links links extra extra extra extra"; } }/* The Links Container */
.main-navigation-links {
    grid-area                  : links;
    display                    : flex;
    flex-direction             : column;
    align-items                : flex-start;
    padding-top                : 6rlh;
    gap                        : 0.5rlh;
    transform                  : translateX(5rlh);
    opacity                    : 0;
    transition-property        : transform, opacity;
    transition-delay           : 250ms;
    transition-duration        : 350ms;
    transition-timing-function : ease-out;
}
@media (width > 700px) {
    .main-navigation-links {
        padding-top : 8rlh;
    }
}
@media (width > 900px) {
    .main-navigation-links {
        border-left  : 1px solid var(--gray-dark);
        padding-left : 1rlh;
    }
}
.main-navigation-link {
    font                : var(--font-big-sans);
    transition-property : color;
}
.main-navigation-link:hover {
    color : var(--orange);
}
.main-navigation-extra {
    grid-area                  : extra;
    display                    : flex;
    flex-direction             : column;
    gap                        : 2rlh;
    font                       : var(--font-base-sans);
    text-transform             : uppercase;
    transform                  : translateX(5rlh);
    opacity                    : 0;
    transition-property        : transform, opacity;
    transition-delay           : 300ms;
    transition-duration        : 350ms;
    transition-timing-function : ease-out;
    padding-top                : 2rlh;
}
@media (width > 700px) {
    .main-navigation-extra {
        border-left  : 1px solid var(--gray-dark);
        padding-left : 1rlh;
        padding-top  : 8rlh;
    }
}
.main-navigation-extra-block {
    display        : flex;
    flex-direction : column;
    align-items    : flex-start;
}
.main-navigation-links,
.main-navigation-extra {
    background : var(--gray);
}/* Active Menu State */
.main-navigation-is-open :is(.header-contacts,.header-languages){
    opacity        : 0;
    pointer-events : none;
}
.main-navigation-is-open .header {
    background          : transparent;
}
@media (width > 700px) {
    .main-navigation-is-open .header {
        border-bottom-color : transparent;
    }
}
.main-navigation-is-open :is(.main-navigation,.main-navigation-extra,.main-navigation-links,.main-navigation-languages) {
    transform      : initial;
    pointer-events : all;
    opacity        : 1;
}/* Languages Menu */
.main-navigation-languages {
    display                    : flex;
    gap                        : 1.5rlh;
    padding-top                : 2rlh;
    transform                  : translateX(5rlh);
    opacity                    : 0;
    transition-property        : transform, opacity;
    transition-delay           : 350ms;
    transition-duration        : 350ms;
    transition-timing-function : ease-out;
}
.main-navigation-language {
    font           : var(--font-small-sans-300);
    text-transform : uppercase;
    letter-spacing : 0.05em;
}
.main-navigation-language.active,
.main-navigation-language:hover{
    font                  : var(--font-small-sans-600);
    text-decoration       : underline;
    text-underline-offset : 4px;
}
.main-navigation-is-open .header-button {
    justify-content: center;
}
@media (width > 700px) {    
    .main-navigation-languages { display : none; }
    .main-navigation-is-open .header-button::before {
        content        : attr(data-label);
        height         : auto;
        background     : transparent;
        font           : var(--font-small-sans-300);
        text-transform : uppercase;
        letter-spacing : 0.05em;
        text-align     : left;
    }
    .main-navigation-is-open .header-button::after {
        display : none;
    }
}
@media (width <= 700px) {
    .main-navigation-is-open .header-button::before {
        transform : translateY(1px) rotate(30deg) scaleX(.5);
    }
    .main-navigation-is-open .header-button::after {
        transform : rotate(-30deg) scaleX(.5);
    }
}/* Contacts Section */
#contacts {
    display               : grid;
    grid-template-columns : 1fr;
    grid-template-areas   : "text" "dot" "form";
    border-top            : 1px solid var(--gray-dark);
}
@media (width > 600px) {
    #contacts {
        grid-template-columns : 2fr 1fr;
        grid-template-areas   : "text dot" "form form";
    }
}
@media (width > 950px) {
    #contacts {
        grid-template-columns : 1fr 1fr;
        grid-template-areas   : "text dot" "form form";
    }
}
.contacts-text {
    grid-area    : text;
    font         : var(--font-big-sans);
    padding      : var(--side-padding);
}
@media (width > 600px) {
    .contacts-text { border-right : 1px solid var(--gray-dark); }
}
.contacts-dot {
    grid-area : dot;
    width : 1rem;
    height : 1rem;
    background: var(--orange);
    justify-self: end;
    align-self: end;
    margin : var(--side-padding);
    border-radius : 50%;
}
.contacts-form {
    grid-area  : form;
    border-top : 1px solid var(--gray-dark);
}
.input-container {
    padding         : 1rlh var(--side-padding) 3rlh;
    display         : flex;
    flex-direction  : column;
    align-items     : flex-start;
    justify-content : flex-start;
    border-bottom   : 1px solid var(--gray-dark);
}
.input-container label {
    font           : var(--font-base-sans-600);
    text-transform : uppercase;
}
.input-container label::after {
    content     : " *";
    color       : var(--orange);
    white-space : pre;
}
.input-container :where(input[type="text"],input[type="email"], button, textarea) {
    border : none;
    appearance: none;
    resize: none;
    width : 100%;
    font : var(--font-base-serif);
}
.input-container:nth-child(3) {
    padding-bottom : 0;
}
.input-container textarea {
    min-height : 4rlh;
}
.input-container button {
    text-align     : left;
    width          : auto;
    font           : var(--font-base-sans-600);
    text-transform : uppercase;
    cursor         : pointer;
    margin-bottom: 1rlh;
}
.input-container button::after {
    content     : " ↑";
    color       : var(--orange);
    white-space : pre;   
}/* Active Block */
.input-container:has(*:focus) {
    border-bottom-color : var(--orange);
}/* Site's Footer */
.footer {
    background : var(--black);
    color      : var(--white);
    font       : var(--font-base-sans);
}/* Set all the rows */
.footer-logos,
.footer-contacts,
.footer-social,
.footer-legal {
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    padding               : 1rlh var(--side-padding);
}/* Top Logos Section */
.footer-logos {
    padding-top         : 3rlh;
    padding-bottom      : 1.5rlh;
    grid-template-areas : "primary primary primary secondary secondary secondary";
    align-items         : center;
    border-bottom       : 1px solid var(--white);
    align-items: start;
}/* Main Copany logo */
.footer-logos-primary {
    grid-area : primary;
    justify-self: start;
}
.footer-logos-primary svg {
    display    : block;
    height     : 4rlh;

}/* Secondary logo sections */
.footer-logos-secondary {
    grid-area : secondary;
    display   : flex;
    gap       : 1rlh;
}
.footer-logos-secondary-link {
    display : block;
    aspect-ratio: 1;
    width : 4rlh;
}
@media (width < 500px) {
    .footer-logos-secondary-link {
        width : 2.5rlh;
    }
    .footer-logos-primary svg {
        height : 2.5rlh;
    }
}/* Contacts Block */
.footer-contacts {
    border-bottom       : 1px solid var(--white);
    grid-template-areas : "A A A B B B" ". . . C C C" ". . . D D D";
}
.footer-contacts div:nth-child(1) { grid-area : A; font : var(--font-base-sans-600); }
.footer-contacts div:nth-child(2) { grid-area : B; }
.footer-contacts div:nth-child(3) { grid-area : C; }
.footer-contacts div:nth-child(4) { grid-area : D; }/* Social Block */
.footer-social {
    border-bottom       : 1px solid var(--white);
    grid-template-areas : "B B B C C C";
}
.footer-social div:nth-child(1) { grid-area : A; }
.footer-social div:nth-child(2) { grid-area : B; }
.footer-social div:nth-child(3) { grid-area : C; text-transform: uppercase;}
@media (width <= 700px) {
    .footer-social div:nth-child(1) { display: none}
}/* Legal Block */
.footer-legal {
    border-bottom       : 1px solid var(--white);
    grid-template-areas : "A A A B B B" ". . . C C C";
    padding-bottom      : 6rlh;
}
.footer-legal div:nth-child(1) { grid-area : A; }
.footer-legal div:nth-child(2) { grid-area : B; }
.footer-legal div:nth-child(3) { grid-area : C; }/* Footer Adjustments */
@media (width > 700px) {
    .footer-logos    { grid-template-areas : "primary primary primary . . . secondary secondary secondary secondary secondary secondary"; }
    .footer-contacts { grid-template-areas : "A A A A B B C C C C D D"; }
    .footer-social   { grid-template-areas : "A A A A A A B B B B C C"; }
    .footer-legal    { grid-template-areas : "A A A A A A B B B B C C"; }
}/* Footer Adjustments */
@media (width > 1000px) {
    .footer-logos    { grid-template-areas : "primary primary primary . . . . secondary secondary secondary secondary secondary"; }
    .footer-contacts { grid-template-areas : "A A A A B B B C C C D D"; }
    .footer-social   { grid-template-areas : "A A A A A A A B B B C C"; }
    .footer-legal    { grid-template-areas : "A A A A A A A B B B C C"; }
}/* Silence is golden */
.slider {
    position : relative;
    cursor   : none;
    overflow : hidden;
}
.slides {
    display             : grid;
    grid-template-areas : "slide";
    width               : 100vw;
    height              : 100svh;
}
.slide {
    grid-area           : slide;
    width               : 100%;
    height              : 100%;
    object-fit          : cover;
    transition-property : opacity;
}
.slide:not(.slide-active) {
    opacity: 0;
}
.slider-text {
    position       : absolute;
    bottom         : 0;
    left           : 0;
    padding        : var(--side-padding);
    font           : var(--font-big-sans);
    color          : var(--white);
    pointer-events : none;
    text-wrap      : balance;
}
.slider-controls {
    position            : absolute;
    transform           : translate(-50%,-50%);
    width               : 8rlh;
    display             : grid;
    grid-template-areas : "content";
    pointer-events      : none;
    opacity             : 0;
}
.slider-arrow {
    grid-area : content;
    fill : white;
}
.slider-index {
    grid-area    : content;
    justify-self : end;
    transform    : translateX(50%);
    color : white;
}/* The intro block with all the fancy animations */
.intro-container {
    position : relative;
    height   : 200vh;
}
.intro-container::after {
    content : "";
    position: absolute;
    bottom: -8rlh;
    right : 0;
    left : 33.33333%;
    height : 8rlh;
    background: var(--orange);
}
.intro-content {
    padding             : var(--side-padding) var(--side-padding) 1rlh;
    min-height          : calc(100vh - 4rlh);
    display             : grid;
    grid-template-rows  : auto auto;
    position            : sticky;
    top                 : 4rlh;
    grid-template-areas : "text" "link";
    overflow            : hidden;
}
.intro-text {
    font : var(--font-big-sans);
    grid-area : text;
}
.intro-link {
    align-self     : end;
    justify-self   : start;
    text-transform : uppercase;
    font           : var(--font-base-sans-600);
    grid-area      : link;
}
.intro-link::after {
    content : "↑";
    color   : var(--orange);
    transform : rotate(90deg);
    display: inline-block;
    margin-left : 1ch;
}
.intro-disc {
    grid-row : 1 / -1;
    grid-column: 1;
    background    : var(--orange);
    border-radius : 50%;
    aspect-ratio  : 1;
    width         : 50vmin;
    opacity       : .5;
    align-self: center;
    justify-self: center;
}/* The Images Divider */
.intro-images {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    position              : sticky;
    height                : 200vh;
    top                   : -100vh;
    grid-template-rows    : 4rlh 4rlh 1fr;
    align-items           : start;
}
.intro-image {
    background : var(--orange);
    position   : sticky;
    top        : 4rlh;
}
.intro-image-content {
    height     : calc(100vh - 4rlh);
    object-fit : cover;
    width      : 100%;
}
.intro-image:nth-child(1) {
    grid-row : 1 / -1;
    grid-column : 1;
    z-index  : 100;
}
.intro-image:nth-child(2) {
    grid-row : 2 / -1;
    grid-column : 2;
    z-index  : 99;
}
.intro-image:nth-child(3) {
    grid-row : 3 / -1;
    grid-column : 3;
    z-index  : 98;
}
.intro-image:nth-child(n+4) {
    grid-row   : 3 / -1;
    z-index    : 97;
    grid-column : 3;
}
.intro-image.active-image {
    z-index : 101;
}/* The susteinability section */
.sos {
    padding : var(--side-padding);
}/* The big section title */
.sos-title {
    font           : var(--font-big-serif);
    font-style     : italic;
    padding-bottom : 2rlh;
    margin-bottom  : 1rlh;
    border-bottom  : 1px solid var(--gray-dark);
    position       : relative;
}
.sos-title::after {
    content       : "";
    border-radius : 50%;
    background    : var(--orange);
    width : 1rem;
    display: block;
    position: absolute;
    right : 0;
    bottom : 2rlh;
    aspect-ratio: 1;
}
@media (width > 1000px) {
    .sos-title {
        margin-bottom : 3rlh;
    }
}
.sos-content {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 4rlh var(--gap);
    grid-template-areas   : "link" "text" "images";
}
@media (width > 1000px) {
    .sos-content {
        grid-template-columns : 1fr 1fr;
        grid-template-rows    : auto 1fr;
        grid-template-areas   : "text images" "link images";
        gap                   : var(--gap);
    }   
}
.sos-images {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : var(--gap);
    grid-area             : images;
}
@media (width > 600px) {
    .sos-images {
        grid-template-columns : 1fr 1fr;
    }
}
.sos-text {
    max-width : 40ch;
    font      : var(--font-base-sans);
    grid-area : text;
}
.sos-link {
    font           : var(--font-base-sans-600);
    display        : inline-block;
    text-transform : uppercase;
    grid-area      : link;
    justify-self   : start;
    align-self     : start;
}
.sos-link::after {
    content : "↑";
    color   : var(--orange);
    transform : rotate(90deg);
    display: inline-block;
    margin-left : 1ch;
}/* The wines section */
.vini-container {
    position : relative;
}
.vini {
    padding               : 0 0 0 var(--side-padding);
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : 3rlh var(--gap);
    position              : relative;
    grid-template-areas   : "texts texts texts texts texts texts" "tools tools tools tools tools tools" "images images images images images images";
    min-height            : calc(100vh - 4rlh);
}
@media (width > 700px) {
    .vini {
        grid-template-areas : "texts texts texts texts texts texts texts texts texts texts texts texts" "tools tools tools tools tools tools images images images images images images";
    }
}
@media (width > 1100px) {
    .vini {
        grid-template-areas : "texts texts texts texts texts tools tools tools images images images images";
        gap                 : var(--gap);
    }
    .vini-pictures {
        width : 33.333%
    }
    .vini-tools {
        padding-top : var(--side-padding);
    }
}
.vini-texts {
    grid-area           : texts;
    padding-top         : var(--side-padding);
    display             : grid;
    gap                 : var(--gap);
    grid-template-areas : "title" "text" "link";
    align-self          : start;
}
.vini-tools {
    grid-area          : tools;
    display            : grid;
    grid-template-rows : 1fr 1fr;
    font               : var(--font-base-sans);
}
.vini-pictures {
    grid-area : images;
    display: grid;
    grid-template-areas: "picture";
    width : 33.333vw;
    justify-self: end;
}
.vini-picture {
    grid-area : picture;
    height : 100%;
    width : 100%;
}/* The big section title */
.vini-title {
    font           : var(--font-big-serif);
    position       : relative;
}
.vini-title em {
    display: block;
}
@media (width > 1000px) {
    .vini-text {
        margin-top: 2rlh;
    }
}
.vini-text {
    max-width : 40ch;
    font      : var(--font-base-sans);
    grid-area : text;
    padding-top : 2rlh;
    margin-top  : 1rlh;
    border-top  : 1px solid var(--gray-dark);
}
.vini-link {
    font           : var(--font-base-sans-600);
    display        : inline-block;
    text-transform : uppercase;
    grid-area      : link;
    justify-self   : start;
    align-self     : start;
}
.vini-link::after {
    content : "↑";
    color   : var(--orange);
    transform : rotate(90deg);
    display: inline-block;
    margin-left : 1ch;
}
.vini-navigation {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : var(--gap);
}
.vini-navigation-links {
    display        : flex;
    flex-direction : column;
    align-items: flex-start;
}
.vini-navigation-link {
    color : var(--gray-dark);
}
.vini-navigation-link.active {
    color : var(--black);
}/* Page Title */
.page-title-container {
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    padding               : 5rlh var(--side-padding) 0.5rlh;
    grid-template-areas   : "disc title title title title title";
    border-bottom         : 1px solid var(--gray-dark);
}
@media (width > 700px) {
    .page-title-container {
        grid-template-areas : "disc disc title title title title title title title title title title";
    }
}
.page-title-disc {
    grid-area     : disc;
    justify-self  : start;
    aspect-ratio  : 1;
    height        : 85%;
    background    : var(--orange);
    align-self    : center;
    border-radius : 50%;
    animation     : pulse 3s infinite;
}
.page-title {
    font      : var(--font-huge-sans);
    grid-area : title;
}/* Pulsating animation */
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0px rgb(241, 90, 36, 0.4); }
    100% { box-shadow: 0 0 0 20px rgb(241, 90, 36, 0.0); }
}/* Blocks */
.filters {
    padding               : 0.75rlh var(--side-padding) 0.5rlh;
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    grid-template-areas   : "indicator indicator button button button button button button button button button button";
    border-bottom         : 1px solid var(--gray-dark);
    background            : var(--gray);
    position              : sticky;
    top                   : 4rlh;
}
.filters-indicator {
    grid-area : indicator;
    font      : var(--font-base-sans);
}
.filters-button {
    grid-area      : button;
    text-align     : left;
    border         : none;
    appearance     : none;
    font           : var(--font-base-sans);
    text-transform : uppercase;
}/* The Product Archive */
.product-title-container {
    padding               : 2rlh var(--side-padding);
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    grid-template-areas   : "disc title title title title title";
    border-bottom         : 1px solid var(--gray-dark);
}
.product-disc {
    grid-area     : disc;
    justify-self  : start;
    aspect-ratio  : 1;
    height        : 85%;
    align-self    : center;
    border-radius : 50%;
    border        : 5px solid #B3B3B3;
}
.product-title {
    grid-area : title;
    font      : var(--font-huge-sans);
}/* The Intro Section */
.product-intro-container {
    padding               : 2rlh var(--side-padding);
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    grid-template-areas   : ". subtitle subtitle subtitle subtitle subtitle" "intro intro intro intro intro intro";
    align-items           : baseline;
}
.product-intro-title {
    grid-area      : subtitle;
    text-transform : uppercase;
    font           : var(--font-base-sans);
}
.product-intro {
    grid-area      : intro;
    font           : var(--font-big-sans);
    padding-bottom : var(--side-padding);
    border-bottom  : 1px solid var(--gray-dark);
}/* Product Picture and information */
.product-content-container {
    padding               : 0 var(--side-padding);
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    align-items           : start;
    grid-template-areas   : "picture picture picture picture picture picture" "info info info info info info";
}
.product-picture {
    grid-area : picture;
}
.product-information {
    grid-area: info;
}/* Details Block */
.product-details-title {
    border-top     : 1px solid var(--gray-dark);
    border-bottom  : 1px solid var(--gray-dark);
    font           : var(--font-base-sans-500);
    text-transform : uppercase;
    padding        : 0.5rlh 0;
}
.product-details-content {
    font          : var(--font-mid-serif);
    padding       : 0.5rlh 0;
    border-bottom : 1px solid var(--gray-dark);
}/* Specs */
.product-specs {
    font          : var(--font-base-sans);
    padding       : 0.5rlh 0 5rlh;
    border-bottom : 1px solid var(--gray-dark);
}
.product-specs p:not(:last-child) {
    margin-bottom : 0.5rlh;
}
.product-specs strong {
    font-weight : 600;
}/* Downloads Section */
.product-downloads {
    display         : grid;
    justify-content : start;
}
.product-download-link {
    font           : var(--font-base-sans-500);
    text-transform : uppercase;
    padding        : 0.5rlh 0;
    display        : block;
}
.product-download-link::after {
    content   : "↑";
    color     : var(--orange);
    transform : translateX(1ch) rotate(90deg);
    display   : inline-block;
    transition-property: transform;
}
.product-download-link:hover::after {
    transform : translateX(2ch) rotate(90deg);
}/* Wide screen grid adjustments */
@media (width > 700px) {
    .product-title-container {
        grid-template-areas : "disc disc title title title title title title title title title title";
    }
    .product-intro-container {
        grid-template-areas   : "subtitle subtitle intro intro intro intro intro intro intro intro intro intro";
    }
    .product-content-container {
        grid-template-areas   : ". . picture picture picture picture picture picture picture picture picture picture" ". . info info info info info info info info info info";
    }
}
@media (width > 1200px) {
    .product-content-container {
        grid-template-areas   : ". . picture picture picture picture picture picture . info info info";
    }
}/* Block Title */
[data-type="title"] {
    border-bottom         : 1px solid var(--gray-dark);
    padding               : var(--side-padding) var(--side-padding) 0.5rlh;
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    grid-template-areas   : ". title title title title title";


    h2 {
        font      : var(--font-huge-sans);
        grid-area : title;
    }

}
@media (width > 700px) {
    [data-type="title"] {
        grid-template-areas : ". . title title title title title title title title title title";
    }
}/* Block Text */
[data-type="text"] {
    padding               : 2rlh var(--side-padding) 5rlh;
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    grid-template-areas   : ". title title title title title";
}
[data-type="text"] h3 {
    font           : var(--font-base-sans-500);
    grid-area      : title;
    text-transform : uppercase;
}
[data-type="text"] .text {
    grid-area : text;
}
[data-type="text"][data-style="large"] .text {
    font : var(--font-big-sans);
}
[data-type="text"][data-style="small"] .text {
    font : var(--font-base-serif);
}
[data-type="text"][data-style="large"] { grid-template-areas : ". title title title title title" ". text text text text text"; }
[data-type="text"][data-style="small"] { grid-template-areas : ". title title title title title" ". text text text text text"; }
@media (width > 700px) {
    [data-type="text"][data-style="large"] { grid-template-areas : ". . title title title title title title title title title title" ". . text text text text text text text text text text"; }
    [data-type="text"][data-style="small"] {
        grid-template-areas : ". . title title title title title title title title title title" ". . text text text text text text text text text text";
    }

    [data-type="text"][data-style="small"] .text {
        column-count: 2;
        column-gap: var(--gap);
    }
}
@media (width > 900px) {
    [data-type="text"][data-style="large"] { grid-template-areas : "title title text text text text text text text text text text"; }
    [data-type="text"][data-style="small"] { grid-template-areas : "title title text text text text text text text text text text"; }
}
@media (width > 1200px) {
    [data-type="text"][data-style="small"] { grid-template-areas : "title title text text text text text text . . . ."; }
}/* Block Images */
[data-type="images"]:not([data-count="1"]) {
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--gap);
    padding               : var(--side-padding);
}/* We do random layouts to make the grid feel less boring */
[data-type="images"] img:nth-child(1) { grid-area : A; }
[data-type="images"] img:nth-child(2) { grid-area : B; }
[data-type="images"] img:nth-child(3) { grid-area : C; }/* Two images layouts */
[data-type="images"][data-count="2"][data-layout="1"] {
    grid-template-areas : "A A A A A A B B B B B B";
}
[data-type="images"][data-count="2"][data-layout="2"] {
    grid-template-areas : "A A A . B B B B B B B B";
}
[data-type="images"][data-count="2"][data-layout="3"] {
    grid-template-areas : "A A A A A A A . . B B B";
    align-items: end;
}/* Three images layout */
[data-type="images"][data-count="3"][data-layout="1"] {
    grid-template-areas : "A A B B . . . . C C C C";
}
[data-type="images"][data-count="3"][data-layout="2"] {
    grid-template-areas : "C C C C C C A A A . . . " "C C C C C C . . . B B B";
}
[data-type="images"][data-count="3"][data-layout="3"] {
    grid-template-areas : ". . A A A A A A A . . ." "C C C C C . . . B B B ."
}/* Mobile Versions */
@media (width <= 700px) {


    /* Two Images */
    [data-type="images"][data-count="2"][data-layout="1"] {
        grid-template-areas : "A A A B B B";
    }

    [data-type="images"][data-count="2"][data-layout="2"] {
        grid-template-areas : "A A A . . ." ". B B B B B";
    }

    [data-type="images"][data-count="2"][data-layout="3"] {
        grid-template-areas : ". A A A A A" "B B B . . .";
    }

    /* Three Images */
    [data-type="images"][data-count="3"][data-layout="1"] {
        grid-template-areas : "A A A A A A" "B B B C C C";
    }

    [data-type="images"][data-count="3"][data-layout="2"] {
        grid-template-areas : "A A A A A A" "B B B . . ." "B B B C C C" ". . . C C C";
    }

    [data-type="images"][data-count="3"][data-layout="3"] {
        grid-template-areas : "A A A A A A" "C C C . B B"
    }
}/* Reusable Components *//* Nothing to see here *//* Default Image Styles */
img {
    display : block;
    width   : 100%;
    height  : auto;
}