:root {
    /* START >>INDEX.CSS<< START */
    --hero-overlay-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.65));
    /* END >>INDEX.CSS<< END */
}

:root[data-theme="light"] {
    /* START >>INDEX.CSS<< START */
    --hero-overlay-bg: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.45));
    /* END >>INDEX.CSS<< END */
}

.content {
    /* display */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
}

.hero-panel::before {
    /* background */
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;

    /* dimension */
    position: absolute;
    inset: 0;

    /* display */

    /* property */
    content: '';
    transition: transform 550ms ease;
}

.hero-panel {
    /* background */

    /* dimension */
    flex: 1;
    

    /* display */

    /* property */
    /* Anchor for overlay position */
    position: relative;
    text-decoration: none;
    color: white;
    overflow: hidden;
    transform-origin: center;
}

.hero-panel__overlay {
    /* background */
    background: var(--hero-overlay-bg);

    /* dimension */
    position: absolute;
    inset: 0;
    padding: 40px;

    /* display */
    display: flex;
    align-items: flex-end;

    /* property */
    transition: transform 550ms ease;
    z-index: 1;
}

.hero-panel__title {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.hero-panel:hover::before,
.hero-panel:focus::before {
    transform: scale(1.023);
}

.hero-panel:hover .hero-panel__overlay,
.hero-panel:focus .hero-panel__overlay {
    transform: scale(1.018);
}

/* Should be placed at the bottom to override default/original settings */
/* Small screens: stack layout and shrink spacing */
@media (max-width: 768px) {
    /* START >>INDEX.CSS<< START */
    .hero-panel { height: 45vh; }
    .hero-panel__overlay { padding: 24px; }
    .hero-panel__title { font-size: 1.6rem; }
    /* END >>INDEX.CSS<< END */
}

/* Very small screens: single column, tighter text */
@media (max-width: 480px) {
    /* START >>INDEX.CSS<< START */
    .hero-panel { height: 40vh; }
    .hero-panel__overlay { padding: 18px; }
    .hero-panel__title { font-size: 1.3rem; letter-spacing: 0.05em; } 
    /* END >>INDEX.CSS<< END */
}