/* All styles are for 1920px */

body{
    margin-inline:auto;
    border:solid 1px gray;
}


#introduction{
    margin: 7rem 4rem;

    h1{
        margin:0;
        margin-bottom: 0.375em;
        font-size:98px;
        line-height:90px;
    }

    div{
        width: 70%;
        margin-left: auto;

        p{
            margin-block-start: 16px;
            margin-block-end: 16px;
        }

        .button{
            border-radius: 20px;
            font-weight: normal;
            background-color: #e95151;
            margin-top:16px;
        }
    }
}

#trainings-list{
    margin-inline:0!important;
}

h2{
    font-size:48px;
    margin:0;
    line-height:48px;
}

.training-item{
    display:flex;
    justify-content: space-between;
    gap:20px;
    margin-bottom: 20px;

    input[type="checkbox"]{
        display:none;
    }

    .frame{
        border:solid 2px gray;
        padding:0;
        /*background-color: rgba(100,100,100,0.05);*/
        overflow:hidden;

        >.frame-content{
            padding:3rem;
        }
    }
}

div.frame.training-frame-right{
    width:fit-content;
    border-radius:40px 0 0 40px;
    border-right:none;

    .training-header{
        display:flex;

        div{
            margin-left: 2rem;
            align-content:end;
        }
    }

    .training-header>img{
        width:200px;
        transition:1s;
    }

    .button{
        width:100%;
        font-weight: normal;
        background: #e95151;
    }

    .training-attributes{
        display:none;
        max-height:0px;
        transition:1s;
        overflow: hidden;

        p{
            margin:0;
        }
    }
}




div.frame.training-frame-left{
    min-width: 23%;
    border-radius:0 40px 40px 0;
    border-left:none;
    justify-content: space-between;
    align-items: center;

    >.frame-content>div{
        text-align:center;
        margin-block-end: 2rem;
    }

    p{
        font-size:16px;
        line-height:20px;
        margin:0;
    }

    h2{
        font-size:40px;
        line-height:44px;
    }

    hr{width:100%;border-top:0;margin:1rem 0;}
}

.training-attributes>div{
    margin-block-end: 2rem;
}


@media screen and (max-width: 1440px){
    .section{margin-inline:0;}
}


@media screen and (max-width: 1000px){

    #introduction>h1{
        font-size:64px;
        line-height:64px;
    }

    div.frame.training-frame-right h2{
        font-size:32px;
        line-height:32px;
    }
}

@media screen and (max-width: 1440px){
    #introduction{
        margin:60px 100px;
    }
}

@media screen and (max-width: 1280px){
    #introduction{
        margin:calc((100vw - 1000px)/280 * 44 + 64px) calc((100vw - 1000px)/280 * 44 + 16px);

        p{
            font-size:20px;
            line-height:24px;
        }

        >div{
            width:75%;
        }
    }

    #trainings-list{
        p{
            font-size:16px;
            line-height:20px;
        }

        div.frame.training-frame-left h2{
            font-size:36px;
            line-height:36px;
        }
    }

    .training-attributes h2{
        font-size:28px;
        line-height:32px;
    }

    .training-item .frame .frame-content {
        padding: 1rem;

        .button{font-size:1rem;}
    }
}

@media screen and (max-width: 1024px){
    .section{margin-inline:16px;}

    #introduction{
        margin:64px 0;
    }

    #introduction>div{
        max-width: 736px;
        width:auto;
    }

    .section #trainings-list .training-item{
        flex-direction:column-reverse;
        gap:0;
    }

    .section #trainings-list .training-item .frame{
        border-radius:40px;
        border:solid 2px gray;
    }

    .training-item .frame{
        max-width:100%;
        width:auto;
        border-radius:40px;
        border:solid 2px gray;

        .frame-content{
            padding:24px 16px;
            width:-webkit-fill-available;

            .button {width: 90%;}
        }
    }

    .training-item .training-attributes{
        display: flex;
        justify-content: space-around;
    }

    div.frame.training-frame-right .training-header>img{
        width:160px;
    }

    .training-item div.frame.training-frame-left{
        margin-top: -2px;
    }
}

@media screen and (max-width: 768px){
    #introduction{margin:48px 0;}
    #introduction>h1{
        font-size:48px;
        line-height:48px;
    }

    .training-text>p{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;

        margin-block-start:0.5rem;
        margin-block-end:0.5rem;
    }

    div.frame.training-frame-right .training-header{
        flex-direction:column;

        img{
            margin-inline:auto;
            border-radius:50%;
        }
        div{
            margin:0;
        }
    }

    div.frame.training-frame-right .training-attributes{
        display: block;
        text-align: center;
    }

    div.frame.training-frame-left .training-attributes, div.frame.training-frame-left hr{
        display:none;
    }

    div.frame.training-frame-right .frame-content>label>p{
        margin:0;
        padding:1rem 0;
        color:#E86961;
        transition:1s;
    }

    div.frame.training-frame-right .frame-content>label>p::after{
        content: "Раскрыть";
        font-family: Averta;
        display: block;
        transition: 1s;
        text-align: center;
        max-width: 1px;
        text-wrap: nowrap;
    }

    .training-attributes{
        display:flex;
        justify-content:space-between;
    }


    #training-item-checkbox-{$i}:checked~div.frame.training-frame-right{
        .training-header img{
            width:0px;
        }

        .training-text>p{display:block;}

        .frame-content>label>p::after{content:"Скрыть";max-width: 100vw;}

        .training-attributes{
            max-height: 16rem;
            height: fit-content;
        }
    }
}