.row {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    padding: 0px 0px;
    margin: 0.7rem 0rem 0.7rem 0rem;
}


.col{
    height: 153px;
    width: 100%;
    background: white;
    padding: 0px 7px 7px 0px;
    box-shadow: 0px 1px 2px rgba(0,0,0,.25);
}


.row:last-child{
 margin-bottom: 20px !important;   
}

.col p{
    display: block;
    height: 30px;
    font-size: 13px;
    font-weight: bold;
    color: #737373;
    text-overflow: ellipsis;
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    margin-bottom: 10px;
    margin-top: -7px;
    border-bottom: 1px solid #d9dee4;
    padding-bottom: 5px;
}

.cover {
    object-fit: cover;
    height: 160px;
    border-radius: 3px 0px 0px 3px;
    box-shadow: 0px 1px 2px rgba(0,0,0,.25);
    width: 230px;
    float: left;
    margin: 0px 7px 0px 0px;
}



.course-butt{
    display: inline-block;
    color: white;
    font-weight: 700;
    min-width: 35px;
    height: 45px;
    text-align: center;
    margin-right: 10px;
    font-size: 10px;
    float: right;
    padding: 7px 10px 3px 10px;
    border-radius: 2px 2px;
    cursor: pointer;
    background: #144d6b;
    margin-top: 1%;
    box-shadow: 0px 1px 2px rgba(0,0,0,.25);
    letter-spacing: 1px;
    margin-bottom: 1%;
    width: fit-content;
}

.col-tlt{
    color:#4c69f2;
    font-weight: bold;  
    display: block; 
    margin-top: 5px;
    display: flex;
}


@media only screen and (max-width: 750px){
    
.cover {
    height: 60px;
    border-radius: 3px 3px 3px 3px;
    width: 90px;
    margin: 7px 7px 0px 7px;
}

.col{
    height: auto;
}



table {
    width: 85vw !important;
}


}

@media only screen and (max-width: 480px){
    
.col-tlt{
    min-height: 65px;
}

}