:root {
            --gap: 2rem;
        }
        html {scroll-behavior: smooth;}
        * {margin: 0; padding: 0; box-sizing: border-box; font-family: 'Nunito Sans', sans-serif; }
        h1, h2, h3, h4 {font-family: 'Libre Baskerville', serif; font-weight: 700; color: #333232;}
        h1 {font-size: 1.5rem; font-weight: 700; padding: 0 2rem; text-align: center; text-shadow: 2px 2px 3px black; color: white; line-height: 1.5em;}
        h2 {font-size: 3rem; margin: 0 0 var(--gap) 0; padding-top: var(--gap); font-family: 'Nunito Sans', sans-serif;}
        h3 {font-size: 2.5em; padding-top: var(--gap);  font-family: 'Nunito Sans', sans-serif;}
        p, table {font-weight: 200; font-size: 1.25em; text-indent: 2em; margin: 1em 0; line-height: 1.6; color: #646464; color: black; text-align: justify; letter-spacing: .05em;}
        p strong {font-weight: 500;}
        p a {color: #c97a00; text-decoration: none;}
        p a:hover {text-decoration: underline;}

        table {margin: 2em auto 0px auto; text-indent: 0; border-collapse: collapse;}
        table td {padding: .2em .5em;}
        table tr td + td {padding-left: 2em;}
        table tr:nth-of-type(even) {background: #efefef;}
        table tr {background: #f7f7f7;}
        
        .layout {width: 100%; max-width: 1150px; margin: 0 auto; padding: 0 30px; overflow: hidden;}
        .justify {text-align: justify;}


        .noSelect {-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
        .noSelect:focus {outline: none !important;}
        
        .copyright::after {content:"\00A9\00A0VINTAGE TRAIN s.r.o. 2024";}
        .uzenac::after {content:"\0040";}

        a.fb_share {width: 12rem; display: block; margin: 0px auto var(--gap) auto;}
        a.fb_share:hover img {opacity: .8;}
        
        div#template {display: grid; grid-template-columns: 1fr max-content; overflow:hidden; position: absolute; right: 0; top: 0; min-height: 100%;}
        div#menu {background: #121110; width:0; max-width: 100vw; transition: width 0.4s ease;}
        div#menu div#menu_container {width: 55rem; max-width: 100vw; position: fixed; top: 0; height: 100vh; display: grid; grid-template-rows: 5rem minmax(max-content, 1fr) 5rem;}
        div#menu div#menu_container > div {grid-row: 2/3; margin: 0 2rem; display: grid; grid-template-columns: max-content; justify-content: center; text-align: center; align-self: center; gap: 2rem;}
        div#menu div#menu_container a {text-decoration: none; color: white; padding: .5rem 1rem; position: relative; text-transform: uppercase; letter-spacing: .2em;}
        div#menu div#menu_container a::after {content: "";display: block; position: absolute; bottom: 0; left: 50%; width: 0px; height: 1px; background: white; transition: width 0.2s ease; transform: translateX(-50%);}
        div#menu div#menu_container a:hover::after {width: calc(100% - 2rem);}
        div#menu div#menu_container img {height: 2.5rem; margin: 0 auto 4vh auto; opacity: .3;}
        div#menu_label_text {grid-row: 1/4; margin-right: 2rem; transition: margin-right 0.4s ease;}
        div#burger_container {height: 100%; position: relative; overflow: hidden;}
        div#burger_container > div, div#burger_container::before, div#burger_container::after {content: ""; display: block; height: 1px; width: 100%; background: white; opacity: 1; transition: all 0.2s ease;}
        div#burger_container > div {margin: 1rem 0;}
        div#menu .copyright {grid-row: 3/4; color: #9d9d9d; text-align: center; font-size: .8em; letter-spacing: .2em; align-self: center;}
        
        div#page {width:100vw; display: grid; grid-template-rows: auto min-content;}
        input#menu_scroll {display: none;}
        input#menu_scroll:checked + label + div#template > div#menu {width: 55rem;}
        label#label_menu_srcoll {position: fixed; top: 1rem; right: 1rem; padding: 1rem 1.5rem; color: white; background-color: #121110; z-index:999; cursor: pointer; display: grid; grid-template-rows: calc(2rem + 3px); grid-template-columns: min-content 3rem; align-items: center;}
        input#menu_scroll:checked + label#label_menu_srcoll {background-color: #121110;}
        input#menu_scroll:checked + label#label_menu_srcoll div#burger_container > div {opacity: 0;}
        input#menu_scroll:checked + label#label_menu_srcoll div#burger_container::before {transform: translateY(17px) rotate(135deg);}
        input#menu_scroll:checked + label#label_menu_srcoll div#burger_container::after {transform: translateY(-17px) rotate(-135deg);}
        
        div#canvas {aspect-ratio: 7/7; background: url("https://live.staticflickr.com/65535/53120256749_9e7fee1e57_h.jpg") black; background: url("https://live.staticflickr.com/65535/53120587231_1f8b8bb350_h.jpg") black; background: url("https://live.staticflickr.com/65535/53120794619_0106776475_h.jpg") black; background: url("https://www.vintagetrain.cz/images/malleta.jpg") black; background-position: center; background-position: center bottom; background-size: cover; color: white; display: grid; grid-template-rows: max-content minmax(min-content, 1fr) min-content; position: relative;}
        div#canvas::after {content: ""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; /*background-image: linear-gradient(rgba(0,0,0,.7) 2rem, rgba(0,0,0,.4) 40%); background-image: linear-gradient(rgba(56,45,26,.7) 2rem, rgba(88,76,42,.4) 40%); background-image: linear-gradient(rgba(0,0,0,.5) 4rem, rgba(0,0,0,.25) 30%);*/ background: rgba(0,0,0,.4); z-index:2;}
        div#canvas_menu {z-index:3; min-height: 5rem;}
        div#canvas_menu > img {height: 1.2rem; margin-top: 2.5rem; margin-left: 2rem;}
        div#canvas_menu > a {text-decoration: none; color: white; padding: .5rem 1rem; margin-top: 2rem; /*border-bottom: solid 1px white; */font-weight: 800; position: relative;}
        div#canvas_menu > a::after {content: "";display: block; position: absolute; bottom: 0; left: 50%; width: 0px; height: 1px; background: white; transition: width 0.2s ease; transform: translateX(-50%);}
        div#canvas_menu > a:hover::after {width: calc(100% - 2rem);}
        div#canvas_textplace {gap: 3rem; display: grid; place-items: center; align-content: center; padding-top: 1rem; padding-bottom: 1rem; z-index:3;}
        div#canvas_textplace > a {border: solid 1px white; text-align: center; padding: .5em 1em .4em 1em; letter-spacing: .05em; color: white; text-decoration: none; text-transform: uppercase; font-size: 1.7rem; font-weight: 800; background: rgba(0,0,0,.35); transition: background 0.2s ease;}
        div#canvas_textplace > a:hover {background: rgba(223,149,10,0.4);}
        div#mouse_scroll {text-align: center; display: none;}
        div#mouse_scroll span {font-size: 5rem; z-index: 10; position: relative; color: white; animation: mouse 1s infinite;}

        
        div.product_grid {display: grid;
            gap: var(--gap);
            grid-template-rows: min-content 1fr auto; 
            margin-top: -1.5rem; padding: 1.5rem 0 0 0;
            border-bottom: dotted 5px #d7d7d7 !important;
        }
        div.product_grid + div.product_grid{
            margin-top: 1rem;
        }
        div#pripravovane-akce > div:last-of-type {border: 0;}
        div.product_grid .product_main_image_container {grid-row: 1/2 ; grid-column: 1/2; font-size:0; display: grid; grid-template-columns: 1fr; gap: var(--gap);}
        div.product_grid .product_thumb_image_container {font-size: 0;  margin: var(--gap) 0; display: grid; grid-template-rows: 1fr; gap: var(--gap); }
        div.product_grid img {width:100%; height: auto; }
        div.product_grid .product_image_container img {aspect-ratio: 3 / 2; object-fit: cover;}
        div.product_grid div.product_form_container {grid-row: 3/4 ; grid-column: 1/3 ;}
        
        
        div.product_grid label.product_form_label, div.product_grid a.product_form_label, div.product_grid span.product_form_label {display: block; margin: 0 auto; padding: 1em 2em; border-radius: .3em; border-radius: 0; width: max-content; color: white; text-transform: uppercase; letter-spacing: .1em; background: #bf071f; position: relative; text-decoration: none; cursor: context-menu;}
        div.product_grid label.product_form_label[for^="form_"], div.product_grid a.product_form_label[href] {background: #0b789b; cursor: pointer;}
        div.product_grid label.product_form_label[for^="form_"]::after, div.product_grid a.product_form_label[href]::after {content: ""; display: block; height: 1rem; width: 1rem; background: inherit; position: absolute; bottom: 50%; left: 100%; transform: translate(-50%, 50%) rotate(45deg);}
        div.product_grid label.product_form_label[for^="form_"]:hover, div.product_grid a.product_form_label[href]:hover {background: #036483;}
        div.product_grid div.product_tag {text-align: right; text-transform: uppercase; font-size: .7em; letter-spacing: .07em; margin: 1em 0;}
        div.product_grid div.product_tag span {margin-left: .5em; background: #cd4907; padding: .3em .6em; display: inline-block; color: white;}
        div.product_grid div.product_tag span:nth-of-type(3n+2) {background: #549af5;}
        div.product_grid div.product_tag span:nth-of-type(3n+3) {background: #7c9b07;}
        
        input.visibility_checkbox {display: none;}
        input.visibility_checkbox + div {max-height: 0px; overflow: hidden; transition: max-height 0.7s ease;}
        input.visibility_checkbox:checked + div {max-height: none;}
        
        div.product_subgrid {display: grid; grid-template-columns: min-content 1fr; gap: 1em; margin: 0 0 2em 0;}
        div.product_subgrid > div {font-size: 1.1em; padding-top: .3em; color: #333232;}
        div.product_subgrid > .material-symbols-outlined {font-size: 2.3em; color: #7a99a3;}
        div.product_subgrid ul {list-style-type: none; margin-left: 2em;}
        div.product_subgrid ul li::before {content: "\2BA9"; content: "\00BB"; color: #b6c9cf; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em;}
        div.product_subgrid a {color: #b7431f;}

        div#reference {display: grid; grid-template-columns: 1fr; gap: var(--gap); font-size: 0; margin-top: var(--gap);}
        div#reference > div {padding: 1rem; border: solid 1px #e3dede;}
        div#reference img {width: 100%; aspect-ratio: 3/2; object-fit: cover; box-shadow: 1px 1px 4px #666;}
        div#reference > a[href*="instagram"] {
            position: relative;
            overflow: hidden;
        }

        div#reference > a[href*="instagram"] img {
            transition: transform .4s ease, filter .4s ease;
        }

        div#reference > a[href*="instagram"]::after {
            content: "⌕";
            display: flex;
            align-items: center;
            justify-content: center;

            position: absolute;
            inset: 0;

            font-size: 5rem;
            color: white;

            background: rgba(0, 0, 0, 0.15);

            opacity: 0;
            transform: scaleX(-1); /* ← pravácký grip */
            transition: opacity .35s ease, transform .35s ease;
            pointer-events: none;
        }

        div#reference > a[href*="instagram"]:hover::after {
            opacity: 1;
        }

        div#reference > a[href*="instagram"]:hover img {
            filter: blur(2px);
            transform: scale(1.04);
        }
        
        div#kontakty {background: #d7910d; background: #f7a518; margin-top: var(--gap); padding: 1rem 0; color: #033149;}
        div#kontakty > div {display: grid; gap: 1rem; line-height: 1.55em;}
        div#kontakty > div a {display: block; color: inherit; text-decoration: none;}
        div#kontakty > div a:hover {text-decoration: underline;} 
        div#kontakty h4 {color: inherit; font-family: inherit; text-transform: uppercase; letter-spacing: .05em; }
        div#mailer_container form {display: grid; grid-template-columns: 1fr; grid-template-rows: min-content minmax(6em, 1fr) min-content min-content min-content; gap: .5rem; height: 100vh; background: white; /*background:#fbe3ba;*/ padding: 1rem;}
        div#mailer_container form input[type=text], div#mailer_container form textarea {padding: .5em; background: transparent; border: 0; border-bottom: solid 1px #bbb; outline: none;}
        div#mailer_container form input[type=submit] {background: #7a99a3; color: white; border:0; cursor: pointer; text-transform: uppercase; letter-spacing: .15em; border-radius: 2px; outline: none; display: block; margin: 1rem auto 0 auto; padding: 0.5em 1em;}
        div#mailer_container form textarea {resize: none;}
        iframe#mailer {width: 100%; height: 100%; border: 0; min-height: 16rem;}

	   input:-webkit-autofill,input:-webkit-autofill:hover, input:-webkit-autofill:focus {-webkit-text-fill-color: inherit; -webkit-box-shadow: 0 0 0px 40rem #ffff inset;}
    
    /* PRO STAROU VERZI WEBU */
        form#form_pays {max-width: 800px; margin: 1rem auto;}
    form#form_pays input[type=radio] {display: none;}
    form#form_pays input[type=radio] + label {display: grid; grid-template-columns: min-content auto max-content; grid-template-rows: min-content min-content; outline:solid 1px silver; padding: 1rem; z-index:1; position: relative; margin-bottom: 1px;}
    form#form_pays input[type=radio]:not([disabled]) + label {cursor: pointer;}
    form#form_pays div#variant_container {margin: 1rem 1px;}
    form#form_pays div#variant_container label:first-of-type {border-top-left-radius: 5px; border-top-right-radius: 5px;}
    form#form_pays div#variant_container label:last-of-type {border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
    form#form_pays input[type=radio]:not([disabled]):not([checked]) + label:hover {outline-color: #757575; z-index:3;}
    form#form_pays input[type=radio]:checked + label {outline-color: green !important; z-index:2; background: #f3ffe6;}
    form#form_pays input[type=radio] + label .radio_button {grid-column: 1/2; grid-row: 1/3; margin-right: 1rem; align-self: center; color: silver;}
    form#form_pays input[type=radio]:not([disabled]):not([checked]) + label:hover .radio_button {color: #757575;}
    form#form_pays input[type=radio]:checked + label .radio_button {color: #499719 !important;}
    form#form_pays input[type=radio] + label .varianta_nazev {grid-column: 2/3; grid-row: 1/2; font-weight: 700; color: #3d3d3d; align-self: end;}
    form#form_pays input[type=radio] + label .varianta_popis {grid-column: 2/3; grid-row: 2/3; font-size: .9em; color: #757575; align-self: start;}
    form#form_pays input[type=radio] + label .varianta_cena {grid-column: 3/4; grid-row: 1/2; font-weight:700; color: #3d3d3d; align-self: end; margin-left: 3rem; text-align: right;}
    form#form_pays input[type=radio] + label .varianta_cena_off {grid-column: 3/4; grid-row: 2/3; text-decoration: line-through; color: red; font-size: .9em; align-self: start; margin-left: 3rem; text-align: right;}
    
    form#form_pays div.pays_nadpis {text-align: center; text-transform: uppercase; margin: 1rem 0; font-size: 1.3em; letter-spacing: .05em; color: #757575;}
    
    form#form_pays div#pays_container {display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;}
    form#form_pays div#pays_container input[type=text], form#form_pays div#pays_container input[type=email], form#form_pays div#pays_container > span{grid-column: 1/3;}
    form#form_pays div#pays_container input[type=text], form#form_pays div#pays_container input[type=email] {outline: none; padding: 1rem; font-size: 1em; color:#5d5d5d; border: solid 1px silver; border-radius: 5px;}
    form#form_pays div#pays_container input[type=text]:focus, form#form_pays div#pays_container input[type=email]:focus {border: solid 1px #757575;}
    form#form_pays div#pays_container input[type=submit] {margin: 1rem auto 0 auto; display: block; padding: 1rem 2rem; text-transform: uppercase; background: #449719; border: 0; color: white; cursor: pointer; font-size: 1em; letter-spacing: .1em;}
    form#form_pays div#pays_container input[type=submit]:hover, form#form_pays div#pays_container input[type=submit]:focus {background-color: #488309;}
    form#form_pays div#pays_container a {color: black; text-decoration: none; font-weight: 700;}
    form#form_pays div#pays_container a:hover, form#form_pays div#pays_container a:focus {text-decoration: underline;}

    /* PRO NOVOU VERZI WEBU */
    form.form_pays {max-width: 800px; margin: 1rem auto;}
    form.form_pays input[type=radio] {display: none;}
    form.form_pays input[type=radio] + label {display: grid; grid-template-columns: min-content auto max-content; grid-template-rows: min-content min-content; outline:solid 1px silver; padding: 1rem; z-index:1; position: relative; margin-bottom: 1px;}
    form.form_pays input[type=radio]:not([disabled]) + label {cursor: pointer;}
    form.form_pays div#variant_container {margin: 1rem 1px;}
    form.form_pays div#variant_container label:first-of-type {border-top-left-radius: 5px; border-top-right-radius: 5px;}
    form.form_pays div#variant_container label:last-of-type {border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
    form.form_pays input[type=radio]:not([disabled]):not([checked]) + label:hover {outline-color: #757575; z-index:3;}
    form.form_pays input[type=radio]:checked + label {outline-color: green !important; z-index:2; background: #f3ffe6;}
    form.form_pays input[type=radio] + label .radio_button {grid-column: 1/2; grid-row: 1/3; margin-right: 1rem; align-self: center; color: silver;}
    form.form_pays input[type=radio]:not([disabled]):not([checked]) + label:hover .radio_button {color: #757575;}
    form.form_pays input[type=radio]:checked + label .radio_button {color: #499719 !important;}
    form.form_pays input[type=radio] + label .varianta_nazev {grid-column: 2/3; grid-row: 1/2; font-weight: 700; color: #3d3d3d; align-self: end;}
    form.form_pays input[type=radio] + label .varianta_popis {grid-column: 2/3; grid-row: 2/3; font-size: .9em; color: #757575; align-self: start;}
    form.form_pays input[type=radio] + label .varianta_cena {grid-column: 3/4; grid-row: 1/2; font-weight:700; color: #3d3d3d; align-self: end; margin-left: 3rem; text-align: right;}
    form.form_pays input[type=radio] + label .varianta_cena_off {grid-column: 3/4; grid-row: 2/3; text-decoration: line-through; color: red; font-size: .9em; align-self: start; margin-left: 3rem; text-align: right;}
    
    form.form_pays div.pays_nadpis {text-align: center; text-transform: uppercase; margin: 1rem 0; font-size: 1.3em; letter-spacing: .05em; color: #757575;}
    
    form.form_pays div#pays_container {display: grid; gap: 1rem; grid-template-columns: 1fr 1fr;}
    form.form_pays div#pays_container input[type=text], form.form_pays div#pays_container input[type=email], form.form_pays div#pays_container > span{grid-column: 1/3;}
    form.form_pays div#pays_container input[type=text], form.form_pays div#pays_container input[type=email] {outline: none; padding: 1rem; font-size: 1em; color:#5d5d5d; border: solid 1px silver; border-radius: 5px;}
    form.form_pays div#pays_container input[type=text]:focus, form.form_pays div#pays_container input[type=email]:focus {border: solid 1px #757575;}
    form.form_pays div#pays_container input[type=submit] {margin: 1rem auto 0 auto; display: block; padding: 1rem 2rem; text-transform: uppercase; background: #449719; border: 0; color: white; cursor: pointer; font-size: 1em; letter-spacing: .1em;}
    form.form_pays div#pays_container input[type=submit]:hover, form.form_pays div#pays_container input[type=submit]:focus {background-color: #488309;}
    form.form_pays div#pays_container a {color: black; text-decoration: none; font-weight: 700;}
    form.form_pays div#pays_container a:hover, form.form_pays div#pays_container a:focus {text-decoration: underline;}

    div.product_subgrid > span.material-symbols-outlined + div > span {margin-right: 2rem;}
    a[href="?zmena_meny=true"] {text-decoration: none; background: #ffa700; color: white; padding: .2em .5em; white-space:nowrap;}
    a[href="?zmena_meny=true"]:hover {background: #e99a03;}

   
    div.pays_checkbox_container {display: grid; grid-template-columns: 4rem auto; position: relative; grid-column: 1/3; gap: 1.5rem;}
    div.pays_checkbox_container > label {position: absolute; top: 0; left: 0; height: 4rem; width: 4rem; cursor: pointer; z-index:555;}
    div.pays_checkbox_container > input {display: none;}
    div.pays_checkbox_container > input + span {display: none;}
    div.pays_checkbox_container > input + span, div.pays_checkbox_container > input + span + span {font-size: 4rem; color: #8b8b8b;}
    div.pays_checkbox_container > span.material-symbols-outlined.checked {font-size: 4rem; color: green;}
    div.pays_checkbox_container > input:checked + span + span {display: none;}
    div.pays_checkbox_container > input:checked + span {display: inline-block;}
    div.pays_checkbox_container > input:checked + span {color: green;}
    div.pays_checkbox_container > span {align-self: center;}
        
        @media only screen and (min-width: 40rem) {
            div#canvas {/*aspect-ratio: 2 / 1; */ aspect-ratio: auto; min-height: 100vh;}
	    div#canvas_textplace {gap: 4rem;}
            div#canvas_menu > img {height: 2.8rem; margin-top: 1.75rem; margin-left: 2.6rem;}
            div.product_grid .product_thumb_image_container {grid-row: 2/3 ; grid-column: 1/2 ; grid-template-rows: none; grid-template-columns: 1fr 1fr;}
            h1 {font-size: 3rem;}
            div#mouse_scroll {display: block;}
            div#canvas_textplace {gap: 20vh;}
            form#form_pays div#pays_container input[type=text] {grid-column: auto/auto;} 
            form.form_pays div#pays_container input[type=text] {grid-column: auto/auto;}
            div#reference {
                gap: 2rem;
                grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
                /*grid-auto-rows: 10rem;*/
                grid-auto-flow: dense;
            }
            div#reference img {
                height: 100%;
                box-shadow: 1px 1px 4px #bebebe;
            }
            div#reference > .v-stretch {
                grid-row: span 2;
            }
            div#reference > .h-stretch {
                grid-column: span 2;
                height: 14.2rem;
            }
            div#reference > .h-stretch > img{
                object-position: 50% 70%
            }
            div#reference > .big-stretch {
                grid-row: span 2;
                grid-column: span 2;
            }         
        }
        
        @media only screen and (min-width: 55rem) {
            h3 {padding-top: 0;}
            div.product_grid {display: grid; grid-template-rows: min-content 1fr auto; grid-template-columns: 1fr 50%; gap: var(--gap);}  
            div.product_grid .product_thumb_image_container {margin: 0;}
            div.product_text_container{ grid-row: 1/3 ; grid-column: 2/3 ;} 
            /*div#reference {grid-template-columns: 1fr 1fr 1fr;}*/ 
            div#kontakty > div {grid-template-columns: 1fr 1fr;} 
            div#kontakty > div > *:nth-child(1) {grid-row: 1/2; grid-column: 2/3;} 
            div#kontakty > div > *:nth-child(2) {grid-row: 2/4; grid-column: 2/3;}
            div#kontakty > div > *:nth-child(3) {grid-row: 1/2; grid-column: 1/2;}
            div#kontakty > div > *:nth-child(4) {grid-row: 2/3; grid-column: 1/2;}
            div#kontakty > div > *:nth-child(5) {grid-row: 3/4; grid-column: 1/2;} 
	    iframe#mailer {min-height:0;}
            label#label_menu_srcoll:hover div#menu_label_text {margin-right: 4rem; }  
        }
        
        @keyframes mouse {
        0%   {top: 0;}
        50%  {top: -1rem;}
        100% {top: 0;}
        }

        @media (hover: hover) and (pointer: fine) {
             div.pays_checkbox_container > label:hover + input + span + span {display: none;}
             div.pays_checkbox_container > label:hover + input + span {display: inline-block;}
        }

       .news-strip {
  --strip-max-width: 1150px;
  --gap: 2rem;
  --peek-mobile: 2.75rem;
  --peek-desktop: 4.5rem;
  --peek-left-mobile: 2.75rem;
  --peek-left-desktop: 4.5rem;

  --card-radius: 1rem;
  --card-border: #d9d9d9;
  --card-border-hover: #bdbdbd;
  --card-bg: #fff;

  --text-main: #111;
  --text-muted: #666;

  max-width: var(--strip-max-width);
  margin-inline: auto;
}

.news-strip h3{
    padding:0 !important;
}

.news-strip__header {
  margin-bottom: 1rem;
}

.news-strip__title {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  line-height: 1.15;
}

.news-strip__viewport {
  overflow: hidden;
  padding-bottom: var(--gap);
  border-bottom: dotted 5px #d7d7d7 !important;
}

.news-strip__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--gap);

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  -ms-overflow-style: none;

  -webkit-user-select: none;
  user-select: none;
}

.news-strip__track:has(.news-card:nth-child(2)) {
    grid-auto-columns: calc(100% - var(--peek-left-mobile) - var(--peek-mobile));
}

.news-strip__track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 55rem) {
  .news-strip__track:not(:has(.news-card:nth-child(4))) {
    grid-auto-columns: calc((100% - (2 * var(--gap))) / 3);
  }

  .news-strip__track:has(.news-card:nth-child(4)) {
    grid-auto-columns: calc((100% - var(--peek-left-desktop) - var(--peek-desktop) - (2 * var(--gap))) / 3);
  }
}

.news-card {
  scroll-snap-align: start;
}

.news-card__link {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  color: inherit;
  text-decoration: none;
  background: var(--card-bg);
  overflow: hidden;
}

.news-card__media {
  margin: 0;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #f2f2f2;
}

.news-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.news-card__body {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.5rem;
  min-height: 100%;
  padding: 0.9rem 2rem 0 0;
}

.news-card__date {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.25;
}

.news-card__title {
  margin: 0;
  color: var(--text-main);
  font-size: 1.125rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-card__perex {
  margin: 0;
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
  text-indent: 0;
  letter-spacing: 0;
}