.fronts{
    padding: 70px 0 89px;
}

.fronts .frts{
    display: grid;
    display: -webkit-grid;
    grid-gap: 43px 0;
}

.fronts .frts>*{
    position: relative;
    display: flex;
    display: -webkit-flex;
    align-items: flex-end;
}

.fronts .frts>*::before{
    content: '';
    position: absolute;
    inset: 22px 0 auto auto;
    width: 72%;
    height: 1px;
    background: var(--main);
}

.fronts .frts>* figure{
    display: grid;
    display: -webkit-grid;
    min-width: 305px;
    width: 305px;
    margin: 0;
}

.fronts .frts>* figure figcaption{
    position: relative;
    text-align: center;
    color: var(--white);
    font-weight: 700;
    background: var(--main);
    padding: 11px 29px;
}

.fronts .frts>* figure img{
    width: 100%;
    aspect-ratio: 1/.81311;
    object-fit: cover;
    -o-object-fit: cover;
}

.fronts .frts>* .content{
    height: calc(100% - 46px);
    align-content: center;
    border: 1px solid #DEDEDE;
    background: #F4F4F4;
    padding: 19px 29px 22px 51px;
}

@media(max-width:992px){
    .fronts{
        padding: 2rem 0;
    }
    .fronts .frts>*{
        align-items: stretch;
    }
    .fronts .frts>*::before{
        display: none;
        display: -webkit-none;
    }
    .fronts .frts>* figure img{
        height: 100%;
    }
    .fronts .frts>* figure figcaption{
        align-content: center;
    }
    .fronts .frts>* .content{
        padding: 1.5rem;
    }
}

@media(max-width:768px){
    .fronts .frts>*{
        flex-direction: column;
        -ms-flex-direction: column;
        align-items: flex-start;
        grid-gap: 1rem;
    }
}

@media(max-width:425px){
    .fronts .frts>* figure{
        min-width: unset;
        width: 100%;
    }
}