/* Beach backdrop for the festival-versus-retreat article in ES/EN/DE. */
.post-hero.post-hero-beach {
    display: grid;
    align-items: center;
    min-height: 460px;
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
    background-color: #102e22;
    background-image: linear-gradient(90deg, rgba(9, 30, 22, .82), rgba(9, 30, 22, .68)), url('../img/playa-hero.jpg');
    background-image: linear-gradient(90deg, rgba(9, 30, 22, .82), rgba(9, 30, 22, .68)), image-set(url('../img/playa-hero.webp') type('image/webp'), url('../img/playa-hero.jpg') type('image/jpeg'));
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.post-hero-beach .post-meta {
    flex-wrap: wrap;
    gap: .65rem 1rem;
    color: #fff;
}

.post-hero-beach .post-category {
    background: #f2e6d4;
    color: #654211;
}

.post-hero-beach .post-title,
.post-hero-beach .post-excerpt {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.post-hero-beach .post-title { max-width: 850px; }
.post-hero-beach .post-excerpt { max-width: 740px; font-weight: 400; }

@media (max-width: 760px) {
    .post-hero.post-hero-beach {
        min-height: 0;
        padding: 3rem 0;
        background-image: linear-gradient(rgba(9, 30, 22, .76), rgba(9, 30, 22, .76)), url('../img/playa-hero.jpg');
        background-image: linear-gradient(rgba(9, 30, 22, .76), rgba(9, 30, 22, .76)), image-set(url('../img/playa-hero.webp') type('image/webp'), url('../img/playa-hero.jpg') type('image/jpeg'));
    }
    .post-hero-beach .post-meta { margin-bottom: 1.3rem; }
}