Stories
/* HERO SECTION STYLING */
.hero {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
text-align: center;
overflow: hidden;
font-family: ‘Playfair Display’, serif;
}
/* Hero Image */
.hero img {
width: 100%;
height: 80vh;
object-fit: cover;
display: block;
}
/* Overlay Container */
.hero .overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.45);
padding: 50px 25px;
border-radius: 8px;
color: #fff;
max-width: 800px;
}
/* Hero Text */
.hero h1 {
font-size: 2.8rem;
line-height: 1.3;
margin-bottom: 15px;
}
.hero p {
font-family: ‘Lora’, serif;
font-size: 1.1rem;
opacity: 0.9;
}
.hero a {
display: inline-block;
margin-top: 25px;
padding: 10px 24px;
border: 1px solid #fff;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
font-size: 0.9rem;
}
/* —- Responsive Tweaks —- */
@media (max-width: 1024px) {
.hero img { height: 70vh; }
.hero h1 { font-size: 2.2rem; }
}
@media (max-width: 768px) {
.hero img { height: 65vh; }
.hero .overlay { padding: 35px 20px; }
.hero h1 { font-size: 1.8rem; }
.hero p { font-size: 1rem; }
}
@media (max-width: 480px) {
.hero img { height: 60vh; }
.hero h1 { font-size: 1.5rem; }
.hero p { font-size: 0.95rem; }
.hero a { font-size: 0.85rem; padding: 8px 18px; }
}
Girlgoingplacess 