.news_cards {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: 1%;
}
.news_card {
width: 49%;
display: flex;
padding: 6rem 3rem;
margin-bottom: 2%;
gap: 7%;
border: 2px solid rgba(54, 53, 59, .5);
}
.news_card.orange {
border: 2px solid var(--main-orange);
}
.news_card.green {
border: 2px solid var(--main-green);
}
.news_card.purple {
border: 2px solid var(--main-purple);
}
.news_img_box,
.news_text_box {
width: 49%;
}
.news_img_box,
.news_img {
aspect-ratio: 1/1;
}
.news_text_box {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
}
.news_text_box .opt_title {
font-size: clamp(1rem, 1vw + 1rem, 2.4rem);
padding-bottom: 1rem;
} .news_card.orange .news_text_box .button.field {
background-color: var(--main-orange);
}
.news_card.green .news_text_box .button.field {
background-color: var(--main-green);
}
.news_card.purple .news_text_box .button.field {
background-color: var(--main-purple);
}
.news_text_box .button.field {
width: 70%;
color: white;
text-align: center;
background-color: rgba(54, 53, 59, .5);
}
@media (max-width: 1900px) {
.news_text_box .opt_title {
font-size: clamp(1rem, .7vw + 1rem, 2.5rem);
}
}
@media (max-width: 1400px) {
.news_text_box .opt_title {
font-size: clamp(1rem, .5vw + 1rem, 1.5rem);
}
}
@media (max-width: 1600px) {
.news_card {
padding: 4rem 1.8rem;
gap: 5%;
}
}
@media (max-width: 1150px) {
.news_img_box {
width: 45%;
}
.news_text_box {
width: 55%;
}
.news_card {
padding: 3rem 1.5rem;
gap: 3%;
}
}
@media (max-width: 970px) {
div.news_cards .news_card {
width: 80%;
}
section.news_cards .news_card {
width: 70%;
}
.news_cards {
flex-direction: column;
}
div.news_cards {
align-items: center;
}
.news_cards .news_card {
width: 80%;
}
.news_text_box .opt_title {
font-size: clamp(1rem, 1vw + 1rem, 1.7rem);
}
}
@media (max-width: 768px) {
section.news_cards {
align-items: center;
}
section.news_cards .news_card {
width: 80%;
}
.news_img_box {
width: 45%;
}
.news_text_box {
width: 55%;
}
}
@media (max-width: 650px) {
div.news_cards .news_card,
section.news_cards .news_card {
width: 100%;
padding: 2rem 1rem;
}
.news_text_box .opt_title {
padding-bottom: .5rem;
font-size: clamp(.8rem, .5vw + 1rem, 1.2rem);
}
.news_text_box .button.field {
width: 100%;
padding: .8rem 1rem;
}
}
@media (max-width: 480px) {
.news_card {
padding: 1.2rem .7rem;
}
}