/**
 * Theme Name: Slyks Child
 * Description: Slyks Child theme
 * Author: Slyks
 * Template: blocksy
 * Text Domain: blocksy
*/



 
/* Banner po 6 produktach (3-4 kolumna drugiego rzędu) */

.raypath-category-banner{
    grid-column:3 / 5 !important;
    padding:0 !important;
    margin:0 !important;
    list-style:none;
}

.raypath-banner{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    min-height:400px;
    overflow:hidden;
    text-decoration:none;
    color:#fff;
}

.raypath-banner__bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transition:.5s;
}

.raypath-banner:hover .raypath-banner__bg{
    transform:scale(1.05);
}

.raypath-banner__overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,0),
        rgba(0,0,0,.25)
    );

}

.raypath-banner__content{
    position:absolute;
    left:50px;
    bottom:50px;
    right:50px;
    z-index:5;

}

.raypath-banner__label{
    display:inline-block;
    padding:8px 16px;
    background:#1d8b55;
    color: #fff !important;
    border-radius:100px;
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:18px;
}

.raypath-banner h2{
    color:#fff;
    font-size:42px;
    line-height:1.05;
    margin:0 0 15px;
}

.raypath-banner p{
    color:#fff;
    opacity:.9;
    font-size:18px;
    margin-bottom:30px;
}

.raypath-banner__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 28px;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    transition:
        border-color .2s ease,
        color .2s ease,
        background-color .2s ease;
}

.raypath-banner:hover 
.raypath-banner__button,
.raypath-banner__button:hover {
    border-color: #00a651;
    color: #fff;
    background: transparent;
}

@media(max-width:999px){
    .raypath-category-banner{
        grid-column:1 / -1 !important;
    }
}