/*
 *
 * COMMON STYLING
 *
 */

img {
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
}

.film-title {
    font-family: Overpass, sans-serif;
}

.section-flex-item.active {
    color: var(--secondary);
}

.section-media {
    position: relative;
    will-change: transform;
    transform-origin: center;
}

.preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;
    transition: opacity .2s ease;
}

.section-flex-item.active .section-media .preview {
    opacity: 1;
}

@media screen and (max-width: 950px) {
    .mobile-autoplay .section-media .preview {
        opacity: 1;
    }
}

/*
 *
 * MOBILE SCREENS
 *
 */

@media screen and (max-width: 450px) {
    /* BODY STYLING */
    .body-flex-container {
        color: var(--primary);

        display: flex;
        flex-flow: row wrap;
        justify-content: center;

        padding: 10px 25px;
    }

    /* SECTION STYLING */
    .section-flex-container {
        display: flex;
        flex-flow: column wrap;
        gap: 10px;
        align-items: center;
        justify-content: space-between;
    }

    .section-content {
        padding-top: 5px;
    }
}

/*
 *
 * SMALL SCREENS
 *
 */

@media screen and (min-width: 451px) and (max-width: 950px) {
    /* BODY STYLING */
    .body-flex-container {
        color: var(--primary);

        display: flex;
        flex-flow: row wrap;
        align-items: stretch;

        padding: 10px 25px;
    }

    /* SECTION STYLING */
    .section-flex-container {
        display: flex;
        flex-flow: row wrap;
        gap: 25px;
        justify-content: space-around;
    }

    .section-flex-item {
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;

        will-change: transform;
        transform-origin: center;

        --x: 0px;
        --y: 0px;

        transform: translate(var(--x), var(--y));
    }

    .section-media {
        will-change: transform;
        transform-origin: center;

        --s: 1;

        transform: scale(var(--s));
    }

    .section-content {
        padding-left: 20px;
    }
}

/*
 *
 * MEDIUM/LARGE SCREENS
 *
 */

@media screen and (min-width: 951px) {
    /* BODY STYLING */
    .body-flex-container {
        color: var(--primary);

        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        padding: 25px 25px 25px 50px;
    }

    .body-flex-item:nth-child(1) {
        flex: 0 1 200px;
    }

    .body-flex-item:nth-child(2) {
        flex: 1 0;
    }

    /* SECTION STYLING */
    .section-flex-container {
        align-items: start;
        justify-content: center;
        display: flex;
        flex-flow: row wrap;
        column-gap: 25px;
        row-gap: 25px;
    }

    .section-flex-item {
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;

        will-change: transform;
        transform-origin: center;

        --x: 0px;
        --y: 0px;

        padding: 20px;

        transform: translate(var(--x), var(--y));
    }

    .section-content {
        padding-left: 20px;
    }
}