.lm-card {
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--dark);
    position: relative;
    text-decoration: none;
    display: block;
    aspect-ratio: 4 / 3;

    &:focus-visible {
        outline: var(--focus-ring);
        outline-offset: 2px;
    }

    &:active {
        transform: scale(0.98);
    }

    &:hover .lm-card-image img {
        transform: scale(1.05);
    }
}

.lm-card-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform var(--trans-slow);
    }
}

.lm1 .lm-slider .swiper-wrapper {
    align-items: stretch;
}

.lm1 .lm-slider .swiper-slide {
    height: auto;
    display: flex;
}

.lm1 .lm-slider .swiper-slide .lm-card {
    width: 100%;
    aspect-ratio: 4 / 3;
}

.lm-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--item-gap);
    font-size: var(--text-h4);
    color: var(--white);
    margin: 0;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

.lm-pagination {
    display: flex;
    justify-content: center;
    margin-block-start: var(--header-pad-y);

    .swiper-pagination-bullet {
        width: 24px;
        height: 24px;
        padding: 5px;
        background-clip: content-box;
        background-color: var(--gray);
        opacity: 1;
        transition: background-color var(--trans-fast);

        &:hover {
            background-color: var(--medium);
        }

        &:focus-visible {
            outline: var(--focus-ring);
            outline-offset: 2px;
        }

        &.swiper-pagination-bullet-active {
            background-color: var(--medium);
        }
    }
}

.bg-medium .lm-pagination,
.bg-medium-tint .lm-pagination,
.bg-medium-dim .lm-pagination {
    .swiper-pagination-bullet {
        &:hover {
            background-color: var(--dark);
        }

        &.swiper-pagination-bullet-active {
            background-color: var(--dark);
        }
    }
}

@media (min-width: 1024px) {
    .lm1 .lm-slider.lm-grid-mode {
        overflow: visible;

        .swiper-wrapper {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: calc(var(--item-gap) * 1.33);
            transform: none !important;
        }

        .swiper-slide {
            width: auto !important;
            margin-right: 0 !important;
        }

        .lm-pagination {
            display: none;
        }
    }

    .lm1.lm-cols-2 .lm-slider.lm-grid-mode {
        .swiper-wrapper {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .lm1.lm-cols-4 .lm-slider.lm-grid-mode {
        .swiper-wrapper {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }
}