.cards{flex-wrap: wrap;gap: 5vw;}
.cards,h2,.card,.double-image,.double-image-container{display: flex;justify-content: center;align-items: center;}
.cards{align-items: start;}
.card,.double-image,.double-image-container{flex-direction: column;}
.card{width: 80%;position: relative;justify-content: baseline;}
.card img{width: 100%;border-radius: 30px;}
h1,h2{text-align: center;}
h2{margin: 0;}
.double-image h2::before{content: '';bottom: 0;left: 0;width: 100%;position: absolute;height: .5vh;background-color: var(--primary-color);}
.double-image{margin-top: 5vh;}
.double-image img{width: 90%;}
.double-image h2{position: relative;}
.card a::after{position: absolute;content: url('../images/read-more.svg');bottom: -.2vh;right: -.5vw;width: 50%;}
.card::before{position: absolute;width: 105%;left: -5%;content:'';height: 2vh;top: -2vh;background-color: var(--primary-color);clip-path: url(#clipPathID);}
.card p{font-size: 12px;}
@media only screen and (min-width: 600px) {
.cards{padding: 0 1%;}
.card{width: 40%;}
.card::before{top: -1.8vh;}
.card a::after{right: -.3vw;}
h2{height:5vh}.card h2{flex-basis:8vh;}
}
@media only screen and (min-width: 992px) {   
.double-image h2::before{bottom: 1vh;} 
.cards{min-height: 60vh;}
.card{width: 20%;}
h2{height:8vh}
.card a::after{width: 40%;bottom: 0vh;right: -.12vw;}
.card::before{top: -2vh;}
.double-image-container{flex-direction:row;gap: 10%;flex-wrap: wrap;}
.double-image{width: 40%;}.card h2{flex-basis:10vh;}
}
@media only screen and (min-width: 1700px) {
    .card::before{left: -3%}
}