.home-skeleton {
    width: 100%;
}

.home-skeleton__box,
.home-skeleton__line {
    background: linear-gradient(90deg, var(--grey-10) 25%, var(--grey-20) 50%, var(--grey-10) 75%);
    background-size: 200% 100%;
    animation: home-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 0.5rem;
}

.home-skeleton__line {
    height: 0.875rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.home-skeleton__line--short {
    width: 50%;
}

.home-skeleton__grid--carousel {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
}

@media (max-width: 96.1875rem) {
    .home-skeleton__grid--carousel {
        grid-template-columns: repeat(5, 1fr);
    }

    .home-skeleton__grid--carousel > *:nth-child(n + 11) {
        display: none;
    }
}

@media (max-width: 78.0625rem) {
    .home-skeleton__grid--carousel {
        grid-template-columns: repeat(4, 1fr);
    }

    .home-skeleton__grid--carousel > *:nth-child(n + 9) {
        display: none;
    }
}

@media (max-width: 61.9375rem) {
    .home-skeleton__grid--carousel {
        grid-template-columns: repeat(3, 1fr);
    }

    .home-skeleton__grid--carousel > *:nth-child(n + 7) {
        display: none;
    }
}

@media (max-width: 47.9375rem) {
    .home-skeleton__grid--carousel {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-skeleton__grid--carousel > *:nth-child(n + 5) {
        display: none;
    }
}

@keyframes home-skeleton-shimmer {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}