/* -- Responsive: Mobile -- */
@media screen and (min-width: 320px) {
    /* -- Layout -- */
    main {
        gap: 4rem;
    }
        .container {
            width: calc(100% - 2rem);
        }
        .content-group {
            grid-template-columns: 1fr;
        }
    /* -- Groups -- */
    .text-group {
        gap: 0.5rem;
    }
    .links-group {
        flex-direction: column;
    }
    .review-group {
        flex-direction: column;
    }
    /* -- Banner -- */
    .container-banner {
        padding: 3rem 0;
    }
    /* -- Player -- */
    .player {
        width: 100%;
    }
}
/* -- Responsive: Tablet -- */
@media screen and (min-width: 768px) {
    /* -- Layout -- */
    main {
        gap: 5rem;
    }
        .container {
            width: calc(100% - 2rem);
        }
        .content-group {
            grid-template-columns: 1fr 1fr;
            column-gap: 1.5rem;
        }
    /* -- Groups -- */
    .text-group {
        gap: 0.5rem;
    }
    .links-group {
        flex-direction: row;
    }
    .review-group {
        flex-direction: row;
    }
    /* -- Banner -- */
    .container-banner {
        padding: 4rem 0;
    }
}
/* -- Responsive: Laptop -- */
@media screen and (min-width: 1024px) {
    /* -- Layout -- */
    main {
        gap: 6rem;
    }
        .container {
            width: calc(100% - 12rem);
        }
        .content-group {
            grid-template-columns: 1fr 1fr;
            column-gap: 2rem;
        }
    /* -- Groups -- */
    .text-group {
        gap: 1rem;
    }
    .links-group {
        flex-direction: row;
    }
    .review-group {
        flex-direction: row;
    }
    /* -- Banner -- */
    .container-banner {
        padding: 5rem 0;
    }
    /* -- Player -- */
    .player {
        width: 50%;
    }
    /* -- Footer container -- */
    .footer {
        margin-top: 6rem;
    }
}
/* -- Responsive: Desktop -- */
@media screen and (min-width: 1440px) {
    /* -- Layout -- */
    main {
        gap: 7rem;
    }
        .container {
            width: calc(100% - 14rem);
        }
        .content-group {
            grid-template-columns: 1fr 1fr;
            column-gap: 2rem;
        }
    /* -- Groups -- */
    .text-group {
        gap: 1rem;
    }
    .links-group {
        flex-direction: row;
    }
    .review-group {
        flex-direction: row;
    }
    /* -- Hero -- */
    .section-hero {
        aspect-ratio: 16 / 9;
    }
    /* -- Banner -- */
    .container-banner {
        padding: 5rem 0;
    }
    /* -- Player -- */
    .player {
        width: 50%;
    }
}