.porcelianas-card { width: 100%; max-width: 540px; min-height: 520px; position: relative; overflow: hidden; border-radius: 18px; box-shadow: 0 12px 35px rgba(0,0,0,0.16); transition: transform 0.4s ease, box-shadow 0.4s ease; } .porcelianas-card:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(0,0,0,0.22); } .porcelianas-link { display: block; width: 100%; height: 100%; min-height: 520px; position: relative; text-decoration: none; color: #ffffff; } .porcelianas-image { position: absolute; inset: 0; background-image: url('JUSU_NUOTRAUKOS_URL'); background-size: cover; background-position: center; background-repeat: no-repeat; transition: transform 0.6s ease; } .porcelianas-card:hover .porcelianas-image { transform: scale(1.05); } .porcelianas-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.82) 100% ); } .porcelianas-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px; z-index: 2; } .porcelianas-kicker { display: inline-block; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; color: #e7c78d; font-weight: 600; } .porcelianas-content h2 { margin: 0 0 14px 0; font-size: 38px; line-height: 1.05; font-family: Georgia, serif; font-weight: 500; color: #ffffff; } .porcelianas-content p { margin: 0; max-width: 430px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.92); } .porcelianas-button { display: inline-block; margin-top: 22px; padding: 11px 22px; border: 1px solid rgba(255,255,255,0.7); border-radius: 30px; font-size: 15px; color: #ffffff; transition: all 0.3s ease; } .porcelianas-card:hover .porcelianas-button { background: #ffffff; color: #1f2f3a; } @media (max-width: 767px) { .porcelianas-card, .porcelianas-link { min-height: 430px; } .porcelianas-content { padding: 24px; } .porcelianas-content h2 { font-size: 31px; } .porcelianas-content p { font-size: 15px; } }