@media only screen and (min-width: 320px) {
    :root{
        --box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    }
    /*Background stuff*/
    .color-section{
        background-image: url('img/lk-porras-lines-bg.svg');
        background-size: auto;
        background-position: top left;
        background-repeat: repeat;
    }
    .color-section.wrapper-alternate-color, .color-section.green-color-section{
        background-image:none;
    }
    /*Column row*/
    .gb-container.column-row, .editor-styles-wrapper .gb-container.column-row{
        margin-bottom:40px;
    }
    .column-row > .gb-container{
        margin-bottom:40px;
    }
    .column-row > .gb-container:last-child{
        margin-bottom:0px;
    }
    .contact-info-card{
        margin-bottom:40px;
    }
    /*Contact info card*/
    .contact-info-card > .gb-container, .editor-styles-wrapper .contact-info-card > .gb-container{
        padding:10px 20px;
        background-color:white;
        font-size:16px;
        font-weight:600;
        color:black;
    }
    .contact-info-card img, .editor-styles-wrapper .contact-info-card img{
        width:100%;
        height:200px;
        object-fit: cover;
        object-position: top center;
    }
    .contact-info-card p, .editor-styles-wrapper .contact-info-card p, .contact-info-card a, .editor-styles-wrapper .contact-info-card a{
        font-size:16px;
        font-weight:600;
        color:black;
        margin-bottom:10px;
    }
    .contact-info-card h4, .editor-styles-wrapper .contact-info-card h4{
        font-size:22px;
        font-weight:600;
        color:black;
        margin-bottom:10px;
    }
    /*Product column*/
    .product-column{
        margin-bottom:40px;
    }
    .product-column:last-child{
        margin-bottom:0px;
    }
    .product-column .gallery-slider{
        margin-bottom:20px;
    }
    .product-column h3,.editor-styles-wrapper .product-column h3{
        font-weight:600;
    }
    .product-column-text{
        font-size:12px;
    }
    
    /* ==========================================================================
    LK Porras Background Pattern - Dynamic Version
    JavaScript generoi SVG-taustakuvion dynaamisesti
    Viivat piirtyvät yksitellen (stagger animation)
    Käyttö: Lisää .lk-porras-bg-dynamic luokka elementtiin
    
    Data-attribuutit (optionaaliset):
    - data-min-width="0.1"          (Ohuimman viivan leveys)
    - data-max-width="13"            (Paksumman viivan leveys)
    - data-sections="8"              (Sektioita per rivi)
    - data-rows="12"                 (Rivien määrä)
    - data-opacity="0.497"           (Läpinäkyvyys)
    - data-animation-delay="0"       (Viive ms)
    ========================================================================== */

    .lk-porras-bg-dynamic {
        background-image:none;
        position: relative;
        overflow: hidden;
    }

    /* SVG wrapper - täyttää koko elementin */
    .lk-porras-bg-svg-wrapper {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0;
    }

    .lk-porras-bg-svg-wrapper svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Container fade-in (käynnistyy JS:llä) */
    .lk-porras-bg-dynamic.lk-porras-bg-revealed .lk-porras-bg-svg-wrapper {
        animation: lk-porras-container-reveal 0.5s ease-out forwards;
    }

    @keyframes lk-porras-container-reveal {
        to {
            opacity: 1;
        }
    }
    .lk-porras-description{
        opacity:0;
        transform: translateY(10px);
        transition: all 2s 1.5s ease;
    }
    .lk-porras-bg-revealed .lk-porras-description{
        opacity:1;
        transform: translateY(0);
    }
}
@media only screen and (min-width: 768px) {
    .contact-info-card{
        margin-bottom:0px;
    }
    .contact-info-card p, .editor-styles-wrapper .contact-info-card p, .contact-info-card a, .editor-styles-wrapper .contact-info-card a{
        font-size:14px;
    }
    .product-column{
        margin-bottom:0px;
    }
    .product-column h3,.editor-styles-wrapper .product-column h3{
        font-size:20px;
    }
    .product-column-text{
        font-size:14px;
    }

}

@media only screen and (min-width: 990px) {
    .contact-info-card img, .editor-styles-wrapper .contact-info-card img{
        height:300px;
    }
    .contact-info-card p, .editor-styles-wrapper .contact-info-card p, .contact-info-card a, .editor-styles-wrapper .contact-info-card a{
        font-size:16px;
    }
    .product-column h3,.editor-styles-wrapper .product-column h3{
        font-size:24px;
    }
}
@media only screen and (min-width: 1280px) {
    .contact-info-card img, .editor-styles-wrapper .contact-info-card img{
        
    }
}