.port-section {
padding: 120px 0 60px;
}
.port-section h2 {
font-size: 54px;
font-weight: 500;
line-height: 100%;
letter-spacing: -4%;
color: var(--clr-black);
margin: 0 0 40px 0;
text-align: center;
}
.port-grids {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.port-grid {
display: flex;
flex-direction: column;
background-color: var(--clr-white);
border-radius: var(--bor-radius-l);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.port-grid:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.product-card-img {
display: block;
width: 100%;
height: 250px;
overflow: hidden;
}
.product-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.port-grid:hover .product-card-img img {
transform: scale(1.05);
}
.box_type {
position: absolute;
top: 15px;
left: 15px;
padding: 8px 15px;
background-color: var(--clr-green-light);
color: var(--clr-white);
border-radius: var(--bor-radius-m);
font-size: 14px;
font-weight: 500;
}
.port-grid .text {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.port-grid .p-card-header {
margin-bottom: 15px;
}
.port-grid .p-card-header h3 {
margin: 0;
font-size: 20px;
font-weight: 500;
line-height: 120%;
color: var(--clr-black);
}
.port-grid .p-card-header a {
color: var(--clr-black);
text-decoration: none;
transition: color 0.3s ease;
}
.port-grid .p-card-header a:hover {
color: var(--clr-green);
}
.port-grid .text p {
margin: 0;
color: var(--clr-black);
font-size: 16px;
line-height: 160%;
flex-grow: 1;
}
.clearfix {
display: none;
}
@media screen and (max-width: 1024px) {
.port-section {
padding: 100px 0 40px;
}
.port-section h2 {
font-size: 34px;
}
.port-grids {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
@media screen and (max-width: 768px) {
.port-grids {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media screen and (max-width: 480px) {
.port-grids {
grid-template-columns: 1fr;
gap: 20px;
}
}