.archive-cas{
    background: var(--black);
    padding: 75px 0;
}

.archive-cas .content{
    position: relative;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    grid-gap: 38px;
}

.archive-cas .content .sectitle{
    min-width: fit-content;
}

.archive-cas .content::before{
    content: url('data:image/svg+xml;utf8,<svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 33.336V6.985C0 5.13246 0.735917 3.3558 2.04586 2.04586C3.3558 0.735917 5.13246 0 6.985 0L33.337 0C35.1895 0 36.9662 0.735917 38.2761 2.04586C39.5861 3.3558 40.322 5.13246 40.322 6.985V33.336C40.322 35.1885 39.5861 36.9652 38.2761 38.2751C36.9662 39.5851 35.1895 40.321 33.337 40.321H6.985C5.13246 40.321 3.3558 39.5851 2.04586 38.2751C0.735917 36.9652 0 35.1885 0 33.336Z" fill="rgb(255, 203, 0)"/><path d="M28.98 27.9248H12.395V11.3408" stroke="black" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.395 27.9249L28.13 12.1899" stroke="black" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    height: 41px;
    position: absolute;
    left: calc(100% + 18px);
}

.archive-cas .content::after{
    content: '';
    display: block;
    display: -webkit-block;
    width: 100%;
    height: 2px;
    background: var(--main);
}

.archive-cas .ports{
    display: grid;
    display: -webkit-grid;
    grid-template-columns: repeat(5,1fr);
    grid-gap: 47px 8px;
    margin-top: 4rem;
}

.archive-cas .ports>*{
    display: block;
    display: -webkit-block;
    border: 1px solid var(--main);
    border-radius: 12px;
    overflow: hidden;
}

.archive-cas .ports>* .icon{
    align-content: center;
    padding: 12px;
}

.archive-cas .ports>* .icon img{
    margin: 0 auto;
}

.archive-cas .ports>*>img{
    width: 100%;
    aspect-ratio: 1/.75697;
    object-fit: cover;
    -o-object-fit: cover;
    border-radius: 0 0 12px 12px;
    background: var(--white);
}

footer{
    border-top: 1px solid var(--main);
}

@media(max-width:992px){
    .archive-cas{
        padding: 2rem 0;
    }
    .archive-cas .content::before,
    .archive-cas .content::after{
        display: none;
        display: -webkit-none;
    }
    .archive-cas .ports{
        grid-template-columns: repeat(4,1fr);
    }
}

@media(max-width:768px){
    .archive-cas .ports{
        grid-template-columns: repeat(3,1fr);
    }
}

@media(max-width:575px){
    .archive-cas .ports{
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:425px){
    .archive-cas .ports{
        grid-template-columns: 1fr;
    }
}