.tiles {
    >.swiper-wrapper>.swiper-slide>.tile {
        position: relative;
        overflow: hidden;
        aspect-ratio: 16 / 9;

        >.link>.image,
        >.image {
            position: absolute;
            inset: 0;

            >img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        >.link>.overlay,
        >.overlay {
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.45);
        }
    }

    .tile>.link>.content,
    .tile>.content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1rem 1.25rem;

        >.headline {
            font-size: clamp(1.2rem, 4vw, 2rem);
            margin: 0 0 0.5rem 0;
            font-weight: 600;
            line-height: 1.25;
            color: #fff;
            text-wrap: pretty;
        }

        >.description,
        .description>* {
            font-size: clamp(0.85rem, 2.5vw, 1.1rem);
            line-height: 1.4;
            color: #fff;
            text-wrap: pretty;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;

        }
    }

}

.desktop.tiles {
    display: none;
    gap: 0.5rem;
    grid-template-columns: 1fr;

    &.-two,
    &.-three,
    &.-four,
    &.-five {
        @media (min-width: 600px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    &.-three,
    &.-four,
    &.-five {
        @media (min-width: 900px) {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    &.-two {
        @media (min-width: 1200px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    &.-three {
        @media (min-width: 1200px) {
            grid-template-columns: 2fr 1fr;

            >.tile.main {
                grid-row: span 2;
            }
        }
    }

    &.-four,
    &.-five {
        @media (min-width: 1200px) {
            grid-template-columns: 2fr 1fr 1fr;
            grid-template-rows: repeat(2, 1fr);

            >.tile.main {
                grid-column: 1;
                grid-row: 1 / span 2;
            }
        }
    }

    >.tile>.link:has(.headline)>.content>.headline,
    >.tile>.link:has(.description)>.content>.description {
        cursor: pointer;
    }
}


.swiper.tiles {
    --swiper-theme-color: var(--color-primary);
    --swiper-pagination-bottom: -2px;

    height: 100%;
}

@media (min-width: 1024px) {
    .desktop.tiles {
        display: grid;
        gap: 0.5rem;
    }

    .swiper.tiles {
        display: none;
    }


    .desktop.tiles>.tile {
        position: relative;
        overflow: hidden;
        aspect-ratio: unset;
        min-height: 280px;
    }

    .desktop.tiles>.tile>.link {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
    }


    .desktop.tiles>.tile>.link>.image,
    .desktop.tiles>.tile>.image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .desktop.tiles>.tile>.link>.image img,
    .desktop.tiles>.tile>.image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .desktop.tiles>.tile>.link>.overlay,
    .desktop.tiles>.tile>.overlay {
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.45);
    }


    .desktop.tiles.-two {
        grid-template-columns: repeat(2, 1fr);
    }


    .desktop.tiles.-three {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: repeat(2, 300px);
    }

    .desktop.tiles.-three>.tile.main {
        grid-row: 1 / span 2;
    }

    .desktop.tiles.-four,
    .desktop.tiles.-five {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: repeat(2, 300px);
    }

    .desktop.tiles.-four>.tile.main,
    .desktop.tiles.-five>.tile.main {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    /* Prevent content from overflowing */
    .desktop.tiles .description,
    .desktop.tiles .description>* {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .desktop.tiles>.tile>.link:has(.headline)>.content>.headline,
    .desktop.tiles>.tile>.link:has(.description)>.content>.description {
        cursor: pointer;
    }
}