@media screen and (min-device-width: 901px){
    .training-program {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }
    
    .module {
        padding: 3rem;
        border-radius: 2rem;
        background-color: rgb(48, 48, 48);
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }
    .module__header {
        display: flex;
        justify-content: space-between;
    }
    .module__name {
        color: rgb(255, 255, 255);
        font-size: 3rem;
        font-weight: 500;
        line-height: 2.5rem;
    }
    .module__duration {
        color: rgb(136, 136, 136);
        font-size: 2rem;
        font-weight: 500;
        line-height: 2.5rem;
    }
    .module__button {
        border: 0.2rem solid rgb(223, 32, 99);
        border-radius: 1rem;
        background-color: transparent;
        width: 5rem;
        height: 5rem;
        flex-shrink: 0;
        cursor: pointer;
    }
    .module__button::before, .module__button::after{
        width: 3rem;
        height: 0.4rem;
        background-color: rgb(223, 32, 99);
        content: "";
        position: absolute;
        left: 1rem;
        top: 2.3rem;
    }
    .module__button::after{
        z-index: 1;
        rotate: 90deg;
    }
    .module__button.open::after{
        rotate: 0deg;
    }
    .module__description {
        color: rgb(255, 255, 255);
        font-size: 2rem;
        font-weight: 500;
        line-height: 2.5rem;
    }
    .module__list-of-lessons-wrapper {
        overflow-y: hidden;
        height: 0;
        animation-duration: 0s;
        animation-fill-mode: forwards;
    }
    .module__list-of-lessons-wrapper.open{
        animation-name: openList;
    }
    .module__list-of-lessons {
    
    
    }
    .list-of-lessons {
        list-style-type: decimal;
        list-style-position: inside;
    }
    .list-of-lessons__lession-name {
        color: rgb(136, 136, 136);
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 2.5rem;    
    }
    .training-program__requests {
    }
    .requests {
        display: flex;
        justify-content: space-between;
        padding: 3rem;
        border-radius: 2rem;
        background-color: rgb(48, 48, 48);
    }
    .requests__column {
    }
    .requests__title {
        color: rgb(255, 255, 255);
        font-size: 3rem;
        font-weight: 500;
        line-height: 2.5rem;
    }
    .requests__info {
        color: rgb(136, 136, 136);
        font-size: 2rem;
        font-weight: 500;
        line-height: 2.5rem;
    }
    .requests__button {
        color: rgb(223, 32, 99);
        font-size: 2rem;
        font-weight: 500;
        line-height: 2.5rem;
        border-radius: 1rem;
        border: 0.2rem solid rgb(223, 32, 99);
        padding: 1rem 2rem;
        background-color: transparent;
        cursor: pointer;
    }
    @keyframes openList {
        from{
            height: 0;
        }
        to{
            height: max-content;
        }
    }
}

@media screen and (min-device-width: 320px) and (max-device-width: 900px)  {
    .training-program {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    .module {
        padding: 3rem;
        border-radius: 2rem;
        background-color: rgb(48, 48, 48);
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }
    .module__header {
        display: flex;
        justify-content: space-between;
    }
    .module__name {
        color: rgb(255, 255, 255);
        font-size: 2.5rem;
        font-weight: 500;
        line-height: 1;
    }
    .module__duration {
        color: rgb(136, 136, 136);
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 2.3rem;
    }
    .module__button {
        border: 0.2rem solid rgb(223, 32, 99);
        border-radius: 1rem;
        background-color: transparent;
        width: 5rem;
        height: 5rem;
        flex-shrink: 0;
        cursor: pointer;
    }
    .module__button::before, .module__button::after{
        width: 3rem;
        height: 0.4rem;
        background-color: rgb(223, 32, 99);
        content: "";
        position: absolute;
        left: 1rem;
        top: 2.3rem;
    }
    .module__button::after{
        z-index: 1;
        rotate: 90deg;
    }
    .module__button.open::after{
        rotate: 0deg;
    }
    .module__description {
        color: rgb(255, 255, 255);
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 2.3rem;
    }
    .module__list-of-lessons-wrapper {
        overflow-y: hidden;
        height: 0;
        animation-duration: 0s;
        animation-fill-mode: forwards;
    }
    .module__list-of-lessons-wrapper.open{
        animation-name: openList;
    }
    .module__list-of-lessons {


    }
    .list-of-lessons {
        list-style-type: decimal;
        list-style-position: inside;
    }
    .list-of-lessons__lession-name {
        color: rgb(136, 136, 136);
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 2.5rem;    
    }
    .training-program__requests {
    }
    .requests {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 3rem;
        gap: 2rem;
        border-radius: 2rem;
        background-color: rgb(48, 48, 48);
    }
    .requests__column {
    }
    .requests__title {
        color: rgb(255, 255, 255);
        font-size: 3rem;
        font-weight: 500;
        line-height: 2.5rem;
    }
    .requests__info {
        color: rgb(136, 136, 136);
        font-size: 2rem;
        font-weight: 500;
        line-height: 2.5rem;
        padding-top: 1rem;
    }
    .requests__button {
        color: rgb(223, 32, 99);
        font-size: 2rem;
        font-weight: 500;
        line-height: 2.5rem;
        border-radius: 1rem;
        border: 0.2rem solid rgb(223, 32, 99);
        padding: 1rem 2rem;
        background-color: transparent;
        cursor: pointer;
    }
    @keyframes openList {
        from{
            height: 0;
        }
        to{
            height: max-content;
        }
    }
}