﻿.content-tiles {
    position: relative;
}

.content-tiles__loader {
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .content-tiles__loader .dg-tile__head > div {
        height: 120px;
        aspect-ratio: 16/9;
    }

    .content-tiles__loader .row {
        flex-wrap: nowrap;
        overflow: hidden;
    }

.content-tiles .swiper {
    overflow: hidden;
}

.content-tiles .swiper-slide {
    background-color: transparent;
    width: 220px;
}

.content-tiles .dg-tile {
    width: 100%;
    height: 100%;
}

.content-tiles .dg-tile--no-hover {
    pointer-events: none;
}

.content-tiles .dg-tile__title.has-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.content-tiles .dg-tile__description.has-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dg-tile--small {
    display: none;
}

.content-tiles__grid-slider {
    display: flex;
}

    .content-tiles__grid-slider .content-tiles__slide {
        height: 100px;
        width: 260px;
    }

    .content-tiles__grid-slider .dg-tile {
        display: flex;
        align-items: center;
    }

    .content-tiles__grid-slider .dg-tile__head {
        height: 100px;
        aspect-ratio: 1/1;
        width: 30%;
        min-width: 100px;
    }

    .content-tiles__grid-slider .dg-tile__body {
        padding: 20px 10px 20px 20px;
        width: 70%;
    }

    .content-tiles__grid-slider .dg-tile__title {
        font-size: 16px;
    }

.content-tiles .swiper-navigation {
    display: none;
}

.content-tiles .dg-tile__image-placeholder {
    background-image: url('/images/image-placeholder.svg');
}

@media (min-width: 992px) {
    .dg-tile--small {
        display: flex;
    }
    .content-tiles .swiper-slide {
        background-color: transparent;
        width: 420px;
    }
    .content-tiles__grid-slider {
        display: none;
    }
    .content-tiles .swiper-navigation {
        display: flex;
    }
    .content-tiles__loader .dg-tile__head > div {
        height: 230px;
    }
}