.popular-subtitle {
    margin: 0 2rem;

    font-size: 3rem;
}

.popular-container {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;

    padding: 2rem;
}

main > .popular-container {
    padding: unset;
}

.popular-container .popular-item {
        position: relative;

        aspect-ratio: 7 / 5;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;

        padding: 1em;

        background-color: var(--secondary-bg-colour);

        border-radius: 1em;

        text-decoration: none;

        overflow: hidden;
}

.popular-container .popular-item .loading-overlay {
    position: absolute;
    inset: 0;

    background-image: linear-gradient(135deg,rgba(0, 0, 0, 0) 0%, rgba(150, 150, 150, 0.5) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(150, 150, 150, 0.5) 60%, rgba(0, 0, 0, 0) 100%);

    background-size: 200% 100%;

    animation: loading-item 5s infinite;
}

.popular-container .popular-item .item-cover {
            width: 100%;
            height: calc(100% - 2em - 1rem);

            border-radius: 1em;

            overflow: hidden;
}

.popular-container .popular-item .item-cover img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    background-color: var(--primary-bg-colour);

    transition: scale 0.25s;
}

.popular-container .popular-item:hover .item-cover img {
    scale: 1.05;
}

.popular-container .popular-item .featured-item-text-loading {
    width: 100%;
    height: 2em;

    background-color: var(--primary-bg-colour);

    border-radius: 1em;
}

.popular-container .popular-item h3 {
    width: 100%;
    height: 2em;

    display: flex;
    align-items: center;

    font-size: 1rem;
    text-wrap: nowrap;

    overflow: hidden;

    transition: color 0.25s;
}

.popular-container .popular-item:hover h3 {
    color: white;
}

@keyframes loading-item {
    from {
        background-position: -6em 0;
    }

    50% {
        background-position: -20em 0;
    }

    to {
        background-position: -6em 0;
    }
}

@media (max-width: 1200px) {
    .popular-container {
        font-size: 0.75rem;
    }
}

@media (max-width: 900px) {
    .popular-container {
        grid-template-columns: 1fr 1fr;
    }

    .popular-container .popular-item:nth-child(3n) {
        display: none;
    }
}

@media (max-width: 500px) {
    .popular-container {
        font-size: 0.5rem;
        grid-template-columns: 1fr;
    }
}