/* ==========================================
   FEATURES INTRO
========================================== */

.section-features-intro {
    width: 100%;

    padding: 0 var(--space-5);

    margin-top: 100px;
    margin-bottom: 60px;

    box-sizing: border-box;
}


/* ==========================================
   CONTAINER
========================================== */

.section-features-intro-container {
    width: 100%;
    max-width: 1700px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* ==========================================
   CONTENT
========================================== */

.section-features-intro-content {
    width: 100%;
    max-width: 1500px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 25px;
}


/* ==========================================
   TITLE
========================================== */

.section-features-intro-title {
    margin: 0;

    width: 100%;

    font-family: "MabryPro";

    font-size: 72px;
    font-weight: 900;

    line-height: 1.05;

    color: var(--text);
}


/* ==========================================
   DESCRIPTION
========================================== */

.section-features-intro-description {
    margin: 0;

    max-width: 900px;

    font-family: "Inter";

    font-size: 18px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-70);
}


/* ==========================================
   BUTTON
========================================== */

.section-features-intro-button {
    width: fit-content;
}


/* ==========================================
   IMAGE
========================================== */

.section-features-intro-image {
    width: 100%;

    margin-top: 70px;

    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


.section-features-intro-image img {
    width: 100%;
    height: auto;

    display: block;
}

/*----------------------------------------------------------------

/* ==========================================
   FEATURES PERSONALIZED
========================================== */

.section-features-personalized {
    width: 100%;

    padding: 60px var(--space-5);

    box-sizing: border-box;
}


/* ==========================================
   CONTAINER
========================================== */

.section-features-personalized-container {
    width: 100%;
    max-width: 1700px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* ==========================================
   CONTENT
========================================== */

.section-features-personalized-content {
    width: 100%;
    max-width: 1500px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 25px;
}


/* ==========================================
   TITLE
========================================== */

.section-features-personalized-title {
    width: 100%;

    margin: 0;

    font-family: "MabryPro";

    font-size: 56px;
    font-weight: 900;

    line-height: 1.1;

    color: var(--text);
}


/* ==========================================
   DESCRIPTION
========================================== */

.section-features-personalized-description {
    max-width: 1000px;

    margin: 0;

    font-family: "Inter";

    font-size: 18px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-70);
}


/* ==========================================
   IMAGE
========================================== */

.section-features-personalized-image {
    width: 100%;

    margin-top: 55px;

    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


.section-features-personalized-image img {
    width: 1100px;
    max-width: 100%;

    height: auto;

    display: block;
}


/* ==========================================
   BUTTON
========================================== */

.section-features-personalized-button {
    width: fit-content;

    margin-top: 40px;
}

/*----------------------------------------------------------------------------------------

/* ==========================================
   FEATURES RECAP
========================================== */

.section-features-recap {
    width: 100%;

    padding: 60px var(--space-5);

    box-sizing: border-box;
}


/* ==========================================
   CONTAINER
========================================== */

.section-features-recap-container {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 50px;
}


/* ==========================================
   CONTENT
========================================== */

.section-features-recap-content {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    text-align: left;

    gap: 25px;
}


/* ==========================================
   TITLE
========================================== */

.section-features-recap-title {
    margin: 0;

    font-family: "MabryPro";

    font-size: 52px;
    font-weight: 900;

    line-height: 1.1;

    color: var(--text);
}


/* ==========================================
   DESCRIPTION
========================================== */

.section-features-recap-description {
    margin: 0;

    max-width: 600px;

    font-family: "Inter";

    font-size: 18px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-70);
}


/* ==========================================
   BUTTON
========================================== */

.section-features-recap-button {
    width: fit-content;

    margin-top: 10px;
}


/* ==========================================
   IMAGE
========================================== */

.section-features-recap-image {
    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


.section-features-recap-image img {
    width: 645px;
    height: auto;

    display: block;
}

/*-----------------------------------------------------------------------

/* ==========================================
   FEATURES HIGH QUALITY
========================================== */

.section-features-high-quality {
    width: 100%;

    padding: 60px var(--space-5);

    box-sizing: border-box;
}


/* ==========================================
   CONTAINER
========================================== */

.section-features-high-quality-container {
    width: 100%;
    max-width: 2000px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* ==========================================
   CONTENT
========================================== */

.section-features-high-quality-content {
    width: 100%;
    max-width: 1800px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 25px;
}


/* ==========================================
   TITLE
========================================== */

.section-features-high-quality-title {
    width: 100%;

    margin: 0;

    font-family: "MabryPro";

    font-size: 56px;
    font-weight: 900;

    line-height: 1.1;

    color: var(--text);
}


/* ==========================================
   DESCRIPTION
========================================== */

.section-features-high-quality-description {
    max-width: 1000px;

    margin: 0;

    font-family: "Inter";

    font-size: 18px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-70);
}


/* ==========================================
   IMAGE
========================================== */

.section-features-high-quality-image {
    width: 100%;

    margin-top: 55px;

    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


.section-features-high-quality-image img {
    width: 2000px;
    max-width: 100%;

    height: auto;

    display: block;
}


/* ==========================================
   BUTTON
========================================== */

.section-features-high-quality-button {
    width: fit-content;

    margin-top: 40px;
}

/*-------------------------------------------------------------

/* ==========================================
   FEATURES LYRICS
========================================== */

.section-features-lyrics {
    width: 100%;

    padding: 60px var(--space-5);

    box-sizing: border-box;
}


/* ==========================================
   CONTAINER
========================================== */

.section-features-lyrics-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 60px;
}


/* ==========================================
   IMAGE
========================================== */

.section-features-lyrics-image {
    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


.section-features-lyrics-image img {
    width: 500px;
    max-width: 100%;

    height: auto;

    display: block;
}


/* ==========================================
   CONTENT
========================================== */

.section-features-lyrics-content {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: left;

    gap: 25px;
}


/* ==========================================
   TITLE
========================================== */

.section-features-lyrics-title {
    margin: 0;

    font-family: "MabryPro";

    font-size: 52px;
    font-weight: 900;

    line-height: 1.1;

    color: var(--text);
}


/* ==========================================
   DESCRIPTION
========================================== */

.section-features-lyrics-description {
    margin: 0;

    max-width: 520px;

    font-family: "Inter";

    font-size: 18px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-70);
}


/* ==========================================
   BUTTON
========================================== */

.section-features-lyrics-button {
    width: fit-content;

    margin-top: 10px;
}


/*------------------------------------------------------------------------

/* ==========================================
   FEATURES OFFLINE
========================================== */

.section-features-offline {
    width: 100%;

    padding: 60px var(--space-5);

    box-sizing: border-box;
}


/* ==========================================
   CONTAINER
========================================== */

.section-features-offline-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 60px;
}


/* ==========================================
   CONTENT
========================================== */

.section-features-offline-content {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: left;

    gap: 25px;
}


/* ==========================================
   TITLE
========================================== */

.section-features-offline-title {
    margin: 0;

    font-family: "MabryPro";

    font-size: 52px;
    font-weight: 900;

    line-height: 1.1;

    color: var(--text);
}


/* ==========================================
   DESCRIPTION
========================================== */

.section-features-offline-description {
    margin: 0;

    max-width: 520px;

    font-family: "Inter";

    font-size: 18px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-70);
}


/* ==========================================
   BUTTON
========================================== */

.section-features-offline-button {
    width: fit-content;

    margin-top: 10px;
}


/* ==========================================
   IMAGE
========================================== */

.section-features-offline-image {
    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


.section-features-offline-image img {
    width: 500px;
    max-width: 100%;

    height: auto;

    display: block;
}

/*-----------------------------------------------------------------

/* ==========================================
   FEATURES DEVICES
========================================== */

.section-features-devices {
    width: 100%;

    padding: 60px var(--space-5);

    box-sizing: border-box;
}


/* ==========================================
   CONTAINER
========================================== */

.section-features-devices-container {
    width: 100%;
    max-width: 1700px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* ==========================================
   CONTENT
========================================== */

.section-features-devices-content {
    width: 100%;
    max-width: 1500px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 25px;
}


/* ==========================================
   TITLE
========================================== */

.section-features-devices-title {
    width: 100%;

    margin: 0;

    font-family: "MabryPro";

    font-size: 56px;
    font-weight: 900;

    line-height: 1.1;

    color: var(--text);
}


/* ==========================================
   DESCRIPTION
========================================== */

.section-features-devices-description {
    max-width: 1000px;

    margin: 0;

    font-family: "Inter";

    font-size: 18px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-70);
}


/* ==========================================
   IMAGE
========================================== */

.section-features-devices-image {
    width: 100%;

    margin-top: 55px;

    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


.section-features-devices-image img {
    width: 750px;
    max-width: 100%;

    height: auto;

    display: block;
}


/* ==========================================
   BUTTON
========================================== */

.section-features-devices-button {
    width: fit-content;

    margin-top: 40px;
}

/*------------------------------------------------------------------------

/* ==========================================
   FEATURES SHOP
========================================== */

.section-features-shop {
    width: 100%;

    padding: 60px var(--space-5);

    box-sizing: border-box;
}


/* ==========================================
   CONTAINER
========================================== */

.section-features-shop-container {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 60px;
}


/* ==========================================
   IMAGE
========================================== */

.section-features-shop-image {
    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


.section-features-shop-image img {
    width: 700px;
    max-width: 100%;

    height: auto;

    display: block;
}


/* ==========================================
   CONTENT
========================================== */

.section-features-shop-content {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: left;

    gap: 25px;
}


/* ==========================================
   TITLE
========================================== */

.section-features-shop-title {
    margin: 0;

    font-family: "MabryPro";

    font-size: 52px;
    font-weight: 900;

    line-height: 1.1;

    color: var(--text);
}


/* ==========================================
   DESCRIPTION
========================================== */

.section-features-shop-description {
    margin: 0;

    max-width: 520px;

    font-family: "Inter";

    font-size: 18px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-70);
}


/* ==========================================
   BUTTON
========================================== */

.section-features-shop-button {
    width: fit-content;

    margin-top: 10px;
}

/*------------------------------------------------------------------------

/* ==========================================
   FEATURES RECOMMENDATIONS
========================================== */

.section-features-recommendations {
    width: 100%;

    padding: 60px var(--space-5);

    box-sizing: border-box;
}


/* ==========================================
   CONTAINER
========================================== */

.section-features-recommendations-container {
    width: 100%;
    max-width: 1700px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* ==========================================
   CONTENT
========================================== */

.section-features-recommendations-content {
    width: 100%;
    max-width: 1500px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 25px;
}


/* ==========================================
   TITLE
========================================== */

.section-features-recommendations-title {
    width: 100%;

    margin: 0;

    font-family: "MabryPro";

    font-size: 56px;
    font-weight: 900;

    line-height: 1.1;

    color: var(--text);
}


/* ==========================================
   DESCRIPTION
========================================== */

.section-features-recommendations-description {
    max-width: 1000px;

    margin: 0;

    font-family: "Inter";

    font-size: 18px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-70);
}


/* ==========================================
   IMAGE
========================================== */

.section-features-recommendations-image {
    width: 100%;

    margin-top: 55px;

    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


.section-features-recommendations-image img {
    height: 550px;
    width: auto;

    display: block;
}

/*---------------------------------------------------------

/* ==========================================
   FEATURES FLOW
========================================== */

.section-features-flow {
    width: 100%;

    padding: 60px var(--space-5);

    box-sizing: border-box;
}


/* ==========================================
   CONTAINER
========================================== */

.section-features-flow-container {
    width: 100%;
    max-width: 1700px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* ==========================================
   CONTENT
========================================== */

.section-features-flow-content {
    width: 100%;
    max-width: 1500px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 25px;
}


/* ==========================================
   TITLE
========================================== */

.section-features-flow-title {
    width: 100%;

    margin: 0;

    font-family: "MabryPro";

    font-size: 56px;
    font-weight: 900;

    line-height: 1.1;

    color: var(--text);
}


/* ==========================================
   DESCRIPTION
========================================== */

.section-features-flow-description {
    max-width: 1000px;

    margin: 0;

    font-family: "Inter";

    font-size: 18px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-70);
}


/* ==========================================
   IMAGE
========================================== */

.section-features-flow-image {
    width: 100%;

    margin-top: 55px;

    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


.section-features-flow-image img {
    height: 550px;
    width: auto;

    display: block;
}


/* ==========================================
   BUTTON
========================================== */

.section-features-flow-button {
    width: fit-content;

    margin-top: 40px;
}

/*---------------------------------------------------------------------------

/* ==========================================
   FEATURES PLAYLISTS
========================================== */

.section-features-playlists {
    width: 100%;

    padding: 60px var(--space-5);

    box-sizing: border-box;
}


/* ==========================================
   CONTAINER
========================================== */

.section-features-playlists-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 60px;
}


/* ==========================================
   CONTENT
========================================== */

.section-features-playlists-content {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: left;

    gap: 25px;
}


/* ==========================================
   TITLE
========================================== */

.section-features-playlists-title {
    margin: 0;

    font-family: "MabryPro";

    font-size: 52px;
    font-weight: 900;

    line-height: 1.1;

    color: var(--text);
}


/* ==========================================
   DESCRIPTION
========================================== */

.section-features-playlists-description {
    margin: 0;

    max-width: 520px;

    font-family: "Inter";

    font-size: 18px;
    font-weight: 500;

    line-height: 1.5;

    color: var(--text-70);
}


/* ==========================================
   BUTTON
========================================== */

.section-features-playlists-button {
    width: fit-content;

    margin-top: 10px;
}


/* ==========================================
   IMAGE
========================================== */

.section-features-playlists-image {
    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}


.section-features-playlists-image img {
    width: 645px;
    max-width: 100%;

    height: auto;

    display: block;
}

/* ==========================================
   FEATURES REVEAL
========================================== */

/* ==========================================
   CENTERED SECTIONS
========================================== */

.section-features-intro,
.section-features-personalized,
.section-features-high-quality,
.section-features-devices,
.section-features-recommendations,
.section-features-flow {
    opacity: 0;
    transform: translateY(100px);
    transition:
        opacity 0.7s ease-out,
        transform 0.7s ease-out;
}

.section-features-personalized,
.section-features-high-quality,
.section-features-devices,
.section-features-recommendations,
.section-features-flow {

    opacity: 0;

    transform: translateY(100px);

    transition:
        opacity 0.7s ease-out,
        transform 0.7s ease-out;

}


/* ==========================================
   IMAGE LEFT / TEXT RIGHT
========================================== */

.section-features-lyrics .section-features-lyrics-image,
.section-features-shop .section-features-shop-image {

    opacity: 0;

    transform: translateX(-70px);

    transition:
        opacity 0.7s ease-out,
        transform 0.7s ease-out;

}


.section-features-lyrics .section-features-lyrics-content,
.section-features-shop .section-features-shop-content {

    opacity: 0;

    transform: translateX(70px);

    transition:
        opacity 0.7s ease-out,
        transform 0.7s ease-out;

}


/* ==========================================
   TEXT LEFT / IMAGE RIGHT
========================================== */

.section-features-recap .section-features-recap-content,
.section-features-offline .section-features-offline-content,
.section-features-playlists .section-features-playlists-content {

    opacity: 0;

    transform: translateX(-70px);

    transition:
        opacity 0.7s ease-out,
        transform 0.7s ease-out;

}


.section-features-recap .section-features-recap-image,
.section-features-offline .section-features-offline-image,
.section-features-playlists .section-features-playlists-image {

    opacity: 0;

    transform: translateX(100px);

    transition:
        opacity 0.7s ease-out,
        transform 0.7s ease-out;

}


/* ==========================================
   VISIBLE - CENTERED
========================================== */

.section-features-intro.is-visible,
.section-features-personalized.is-visible,
.section-features-high-quality.is-visible,
.section-features-devices.is-visible,
.section-features-recommendations.is-visible,
.section-features-flow.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================
   VISIBLE - IMAGE LEFT / TEXT RIGHT
========================================== */

.section-features-lyrics.is-visible .section-features-lyrics-image,
.section-features-shop.is-visible .section-features-shop-image,
.section-features-lyrics.is-visible .section-features-lyrics-content,
.section-features-shop.is-visible .section-features-shop-content {

    opacity: 1;

    transform: translateX(0);

}


/* ==========================================
   VISIBLE - TEXT LEFT / IMAGE RIGHT
========================================== */

.section-features-recap.is-visible .section-features-recap-content,
.section-features-offline.is-visible .section-features-offline-content,
.section-features-playlists.is-visible .section-features-playlists-content,
.section-features-recap.is-visible .section-features-recap-image,
.section-features-offline.is-visible .section-features-offline-image,
.section-features-playlists.is-visible .section-features-playlists-image {

    opacity: 1;

    transform: translateX(0);

}

/* ==========================================
   FEATURES - MOBILE
========================================== */

@media (max-width: 850px) {


    /* ==========================================
       INTRO
    ========================================== */

    .section-features-intro {
        margin-top: 70px;
        margin-bottom: 40px;

        padding: 0 20px;
    }

    .section-features-intro-title {
        font-size: 40px;
    }

    .section-features-intro-description {
        max-width: 100%;

        font-size: 16px;
    }

    .section-features-intro-image {
        margin-top: 50px;
    }


    /* ==========================================
       PERSONALIZED
    ========================================== */

    .section-features-personalized {
        padding: 50px 20px;
    }

    .section-features-personalized-title {
        font-size: 36px;
    }

    .section-features-personalized-description {
        max-width: 100%;

        font-size: 16px;
    }

    .section-features-personalized-image {
        margin-top: 40px;
    }

    .section-features-personalized-image img {
        width: 100%;
    }

    .section-features-personalized-button {
        margin-top: 30px;
    }


    /* ==========================================
       RECAP
    ========================================== */

    .section-features-recap {
        padding: 50px 20px;
    }

    .section-features-recap-container {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .section-features-recap-content {
        align-items: center;

        text-align: center;
    }

    .section-features-recap-title {
        font-size: 36px;
    }

    .section-features-recap-description {
        max-width: 100%;

        font-size: 16px;
    }

    .section-features-recap-button {
        margin-top: 5px;
    }

    .section-features-recap-image {
        width: 100%;
    }

    .section-features-recap-image img {
        width: 100%;
        height: auto;
    }


    /* ==========================================
       HIGH QUALITY
    ========================================== */

    .section-features-high-quality {
        padding: 50px 20px;
    }

    .section-features-high-quality-title {
        font-size: 36px;
    }

    .section-features-high-quality-description {
        max-width: 100%;

        font-size: 16px;
    }

    .section-features-high-quality-image {
        margin-top: 40px;
    }

    .section-features-high-quality-image img {
        width: 100%;
        height: auto;
    }

    .section-features-high-quality-button {
        margin-top: 30px;
    }


    /* ==========================================
       LYRICS
    ========================================== */

    .section-features-lyrics {
        padding: 50px 20px;
    }

    .section-features-lyrics-container {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .section-features-lyrics-image {
        width: 100%;
    }

    .section-features-lyrics-image img {
        width: 100%;
        height: auto;
    }

    .section-features-lyrics-content {
        align-items: center;

        text-align: center;
    }

    .section-features-lyrics-title {
        font-size: 36px;
    }

    .section-features-lyrics-description {
        max-width: 100%;

        font-size: 16px;
    }

    .section-features-lyrics-button {
        margin-top: 5px;
    }


    /* ==========================================
       OFFLINE
    ========================================== */

    .section-features-offline {
        padding: 50px 20px;
    }

    .section-features-offline-container {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .section-features-offline-content {
        align-items: center;

        text-align: center;
    }

    .section-features-offline-title {
        font-size: 36px;
    }

    .section-features-offline-description {
        max-width: 100%;

        font-size: 16px;
    }

    .section-features-offline-button {
        margin-top: 5px;
    }

    .section-features-offline-image {
        width: 100%;
    }

    .section-features-offline-image img {
        width: 100%;
        height: auto;
    }


    /* ==========================================
       DEVICES
    ========================================== */

    .section-features-devices {
        padding: 50px 20px;
    }

    .section-features-devices-title {
        font-size: 36px;
    }

    .section-features-devices-description {
        max-width: 100%;

        font-size: 16px;
    }

    .section-features-devices-image {
        margin-top: 40px;
    }

    .section-features-devices-image img {
        width: 100%;
        height: auto;
    }

    .section-features-devices-button {
        margin-top: 30px;
    }


    /* ==========================================
       SHOP
    ========================================== */

    .section-features-shop {
        padding: 50px 20px;
    }

    .section-features-shop-container {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .section-features-shop-image {
        width: 100%;
    }

    .section-features-shop-image img {
        width: 100%;
        height: auto;
    }

    .section-features-shop-content {
        align-items: center;

        text-align: center;
    }

    .section-features-shop-title {
        font-size: 36px;
    }

    .section-features-shop-description {
        max-width: 100%;

        font-size: 16px;
    }

    .section-features-shop-button {
        margin-top: 5px;
    }


    /* ==========================================
       RECOMMENDATIONS
    ========================================== */

    .section-features-recommendations {
        padding: 50px 20px;
    }

    .section-features-recommendations-title {
        font-size: 36px;
    }

    .section-features-recommendations-description {
        max-width: 100%;

        font-size: 16px;
    }

    .section-features-recommendations-image {
        margin-top: 40px;
    }

    .section-features-recommendations-image img {
        width: 100%;
        height: auto;
    }


    /* ==========================================
       FLOW
    ========================================== */

    .section-features-flow {
        padding: 50px 20px;
    }

    .section-features-flow-title {
        font-size: 36px;
    }

    .section-features-flow-description {
        max-width: 100%;

        font-size: 16px;
    }

    .section-features-flow-image {
        margin-top: 40px;
    }

    .section-features-flow-image img {
        width: 100%;
        height: auto;
    }

    .section-features-flow-button {
        margin-top: 30px;
    }


    /* ==========================================
       PLAYLISTS
    ========================================== */

    .section-features-playlists {
        padding: 50px 20px;
    }

    .section-features-playlists-container {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .section-features-playlists-content {
        align-items: center;

        text-align: center;
    }

    .section-features-playlists-title {
        font-size: 36px;
    }

    .section-features-playlists-description {
        max-width: 100%;

        font-size: 16px;
    }

    .section-features-playlists-button {
        margin-top: 5px;
    }

    .section-features-playlists-image {
        width: 100%;
    }

    .section-features-playlists-image img {
        width: 100%;
        height: auto;
    }

}