.guide-hero-bg {
    background-image: url('../images/guide_hero_bg.png');
    background-size: cover;
    background-position: center;
    opacity: 0.25;
}

.guide-hero-inner {
    padding: clamp(0.875rem, 1.6vw, 1.5rem) 0 clamp(1.4rem, 2.2vw, 2.2rem);
}

.guide-hero-title {
    line-height: 1.25;
    text-wrap: balance;
}

.guide-hero-copy {
    line-height: 1.7;
    margin-bottom: 0;
    text-wrap: pretty;
}

.guide-content-panel {
    position: relative;
    isolation: isolate;
    padding-left: 1.5rem;
    border-left: 4px solid transparent;
}

.guide-content-panel::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(72%, 640px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    opacity: 0.24;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.85) 24%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.85) 24%, #000 100%);
    pointer-events: none;
    z-index: -1;
    border-radius: 0.75rem;
}

@media (max-width: 1200px) {
    .guide-content-panel::after {
        width: min(64%, 520px);
    }
}

.guide-section-content--a .guide-content-panel {
    border-left-color: #0ea5e9;
}

.guide-section-content--a .guide-content-panel::after {
    background-image: url('../images/type_a_illust.png');
}

.guide-section-content--b .guide-content-panel {
    border-left-color: #10b981;
}

.guide-section-content--b .guide-content-panel::after {
    background-image: url('../images/type_b_illust.png');
}

.guide-section-content--transition .guide-content-panel {
    border-left-color: #8b5cf6;
}

.guide-section-content--transition .guide-content-panel::after {
    background-image: url('../images/transition_illust.png');
}

@media (max-width: 768px) {
    .guide-hero-inner {
        padding: 1rem 0 2rem;
    }

    .guide-hero-copy {
        font-size: 1rem;
    }

    .guide-content-panel {
        padding-left: 1.125rem;
    }

    .guide-content-panel::after {
        display: none;
    }
}