/* Bonitas Kacheln
=============================================
*/

.bonitas-tiles{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    padding: 0px;

}
.bonitas-tiles a:hover{
    text-decoration: none;
    opacity: 0.7;
}

.bonitas-tiles .bonitas-tile{
    display: grid;
    grid-template-columns: 45fr 55fr;
}

.bonitas-tiles .bonitas-tile.bonitas-tile-default{
    min-height: 250px;
}

@media (max-width: 820px){

    .bonitas-tiles{

        grid-template-columns: 1fr;


    }
}


@media (max-width: 767px){
    .bonitas-tiles{
        grid-template-columns: 1fr!important;
    }

    .bonitas-tiles .bonitas-tile{

        grid-template-columns: 1fr!important;
    }

    .bonitas-tiles .bonitas-tile-default .img-container{
        min-height: 250px;

    }

    .slick-list{padding:0 15% 0 0 !important;}

    .bonitas-tiles .bonitas-tile-default .content-container{

        text-align: center;
        min-height: 360px;

    }



    .bonitas-tiles .bonitas-tile-default .content-container h3{
        text-align: center;
    }

    .bonitas-tiles .bonitas-tile.bonitas-tile-default{
        margin: 15px;
    }

}



.bonitas-tiles .bonitas-tile-default .content-container{
    background-color: var(--color-main);
    color: white;
    padding: 30px;
}



.bonitas-tiles .bonitas-tile-default .content-container h3{
    color: var(--color-sub);

}

.bonitas-tiles .bonitas-tile-default img{
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    display: block;
}

.bonitas-tiles .bonitas-tile h4,
.bonitas-tiles .bonitas-tile .icon_caption{
    text-align: center;
   font-size: 22px;
   padding: 15px 0px;
   color: var(--color-sub);
   font-family: var(--font-heading);
   font-weight: 400;
}

.bonitas-tiles .bonitas-tile.bonitas-tile-imageohover .bonitas-tile-imagehover-overlay {
    background: var(--color-transparent-heavy);
    position: absolute;
    width: 100%;
    aspect-ratio: 1/1;
    top: 0;
    opacity: 0.8;
    transition: all 200ms;
}

.bonitas-tiles .bonitas-tile.bonitas-tile-imageohover img{
    transition: all 200ms;
    image-rendering: -webkit-optimize-contrast;
}

.bonitas-tiles .bonitas-tile.bonitas-tile-imageohover:hover img {
  opacity: 0.3;
}

.bonitas-tiles .bonitas-tile.bonitas-tile-imageohover:hover .bonitas-tile-imagehover-overlay {
  opacity: 1;
}


.bonitas-tiles .bonitas-tile.bonitas-tile-imageohover h4{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    color: white;
}
@media only screen and (max-width: 1024px) {

    .bonitas-tiles .bonitas-tile-default .content-container div{
        font-size: 14px;
    }
    .bonitas-tiles .bonitas-tile-default .content-container h3{
        font-size: 18px;
    }


}

@media only screen and (min-width: 1025px) and (max-width: 1440px) {

    .bonitas-tiles .bonitas-tile-default .content-container div{
        font-size: 15px;
    }
    .bonitas-tiles .bonitas-tile-default .content-container h3{
        font-size: 20px;
    }


}

@media only screen and (min-width: 768px) and (max-width: 1024px)  and (max-height: 400px){

    .bonitas-tiles .bonitas-tile-default .content-container div{
        font-size: 12px;
    }
    .bonitas-tiles .bonitas-tile-default .content-container h3{
        font-size: 14px;
    }


}

@media only screen and (min-width: 1025px) and (max-width: 1440px)  and (max-height: 400px){

    .bonitas-tiles .bonitas-tile-default .content-container div{
        font-size: 14px;
    }
    .bonitas-tiles .bonitas-tile-default .content-container h3{
        font-size: 16px;
    }


}