.foreign-trip-section {
display: grid;
grid-template-columns: 25% 30% 15% 25%;
grid-template-rows: 50% 50%;
gap: 15px;
height: 80vh;
min-height: 460px;
padding: max(2vh, 1.5rem);
position: relative;
} .foreign-trip-section .card {
border-radius: 25px;
box-shadow: -2px 4px 15px rgba(0, 0, 0, 0.26);
overflow: hidden;
position: relative;
}
.foreign-trip-section .card__img {
position: relative;
height: 100%;
width: 100%;
}
.foreign-trip-section .card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 25px;
display: block;
} .foreign-trip-section .card__overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
background: linear-gradient(
0deg,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.2) 60%,
rgba(0, 0, 0, 0) 100%
);
border-radius: 0 0 25px 25px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.foreign-trip-section .card__overlay h2 {
font-size: 1.2rem;
font-weight: 600;
margin: 0;
}
.foreign-trip-section .card__overlay p {
font-size: 0.9rem;
margin: 3px 0 0;
opacity: 0.9;
} .foreign-trip-section span {
position: absolute;
top: 15px;
left: 15px;
color: #ff7b29;
background: #fff;
border-radius: 50px;
padding: 4px 10px;
display: flex;
align-items: center;
font-size: 0.85rem;
font-weight: 600;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
} .foreign-trip-section .card:nth-child(2) {
grid-column: 2/3;
grid-row: span 2;
}
.foreign-trip-section .card:nth-child(3) {
grid-column: span 2;
} @media screen and (max-width: 991px) {
.foreign-trip-section {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
height: auto;
}
.foreign-trip-section .card:nth-child(2),
.foreign-trip-section .card:nth-child(3) {
grid-column: span 1;
grid-row: span 1;
}
}
@media screen and (max-width: 576px) {
.foreign-trip-section {
grid-template-columns: 1fr;
}
}