/* SLEEP PROBLEMS SECTION */

.sleep-problems__container {
    gap: 32px;
}

.sleep-problems__content {
    gap: 16px;
}

.sleep-problems-description {
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0%;
}

.sleep-problems__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 24px;
}

.sleep-problems-card {
    width: 100%;
    height: 300px;
    padding: 18px;
    border-radius: 24px;
    background-color: #120F33;
}

.about-sleep__wrapper, 
.sleep-problems-card > .card-text {
    max-width: 310px;
}

.sleep-problems-card__info-fatigue {
    background: url(../../images/Mobile/info-fatigue.jpg);
    background-repeat: no-repeat;
    background-position-x: center;
    background-size: cover;
}

.sleep-problems-card__excess-caffeine {
    background: linear-gradient(360deg, #A7B5FE 0%, #FF708C 100%);
}
    
/* desktop: fullscreen 1024 */
@media (min-width: 1024px) {
    .sleep-problems__container {
        gap: 60px;
    }
    
    .sleep-problems__content {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .sleep-problems__content > * {
        width: 40%;
    }
    
    .sleep-problems__media {
        flex-direction: row;
    }
}

/* desktop: fullscreen 1440 */
@media (min-width: 1440px) {
    .sleep-problems-description {
        font-size: 24px;
        line-height: 130%;
        letter-spacing: 0%;
    }
    
    .sleep-problems-card {
        padding: 20px;
    }
    
    .sleep-problems-card > .card-text {
        line-height: 150%;
        max-width: 100%;
    }
    
    .sleep-problems-card > .about-sleep {
        font-size: 20px;
        line-height: 120%;
        margin-bottom: 50px;
    }
    
    .about-sleep__wrapper {
        height: 100%;
    }
    
    .about-sleep__wrapper > .about-sleep {
        font-size: 20px;
        line-height: 120%;
    }
}