/* Section */
.product-section { text-align: center; }
.section-header h2 { margin-bottom: 1rem; }
.section-header p { line-height: 1.5; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.product-card { border-radius: 30px; text-align: left; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.3s ease, box-shadow 0.3s ease; height: 630px; max-height: 630px; background: #f8f9fc; }
.card-row-wrapper { max-height: 0; overflow: hidden; transition: all 0.5s ease; opacity: 0; }
.product-card:hover .card-row-wrapper { max-height: 200px; overflow: visible; opacity: 1; }
.card-wrapper { background-size: cover; background-position: top; padding: 10px; display: flex; align-items: center; justify-content: center; height: 100%; transition: all 0.3s ease; }
.card-wrapper-row { padding: 40px 20px; margin-top: auto; text-align: center; }
.card-text { max-width: 300px; margin: 30px auto; font-size: 18px; line-height: 1.5; }
.card-logo { min-height: 60px; }
.card-wrapper-row .card-logo img,
.card-wrapper-row .card-logo svg { width: 100%; max-width: 250px; height: auto; display: block; margin: 0 auto; }
.card-text { flex-grow: 1; }
.section-header { max-width: 620px; margin: 0 auto; }
.section-header h2 { max-width: 520px; margin: 0 auto; } 
.title.h3.card--title { font-size: clamp(18px, 6vw, 20px); }

.product-card { position: relative; }
.card--link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

@media (min-width: 1124px) {
    .card--link:focus ~ .card-wrapper-row .card-row-wrapper { max-height: 200px; overflow: visible; opacity: 1; }
}
@media (max-width: 1123px) {
    .product-card { height: auto; max-height: inherit; }
    .product-grid { grid-template-columns: 1fr; }
    .card-wrapper { height: 383px;}
    div .card-wrapper img,
    div .card-wrapper svg { max-width: 398px; width: 100%; }
    .card-row-wrapper { max-height: inherit; opacity: 1; visibility: visible; overflow: visible; }
}

@media (max-width: 767px) {
    .card-wrapper { height: 376px;}
    .card-wrapper img,
    .card-wrapper svg { max-width: 280px; }
}