.content-section {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 1rem);
    padding-inline: clamp(1rem, 4vw, 2rem);
    margin-block: clamp(1rem, 4vw, 2rem);
    margin-inline: auto;
    color: var(--color-text-content);
}
.content-section.flipped-layout {
    flex-direction: row-reverse;
}
.content-section .text-content {
    background: var(--color-bg-content);
    padding: clamp(1rem, 4vw, 2rem);
    max-width: 50rem;
}
.content-section h2 {
    font-family: "Oswald", "DM Sans", "Helvetica", sans-serif;
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.25;
    color: var(--color-text-heading);
    margin-bottom: 1rem;
}
.content-section h3 {
    font-family: "Oswald", "DM Sans", "Helvetica", sans-serif;
    font-weight: 300;
    color: var(--color-text-subheading);
    text-transform: uppercase;
    text-wrap: balance;
    line-height: 1.625;
    letter-spacing: 0.2em;
    margin-top: 1rem;
}
.content-section em {
    font-style: italic;
}
.content-section strong {
    font-weight: 700;
}
.content-section p {
    line-height: 1.625;
}
.content-section p:not(:last-child) {
    margin-bottom: 0.75rem;
}
.content-section li {
    display: list-item;
    line-height: 1.625;
    list-style: disc outside;
    margin-left: 2em;
}
.content-section .text-content li:not(:last-child) {
    margin-bottom: 0.5rem;
}
.content-section .text-content, .content-section img {
    box-shadow: 0 0 clamp(0.5rem, 2vw, 1rem) clamp(0.375rem, 1.5vw, 0.75rem) var(--color-shadow-content);
}
.content-section .content-image-container {
    position: relative;
    flex-shrink: 0;
    display: flex;
    justify-content: start;
}
.content-section.flipped-layout .content-image-container {
    justify-content: end;
}
.content-section .content-image-container img {
    max-width: clamp(20rem, 35vw, 25rem);
    max-height: clamp(20rem, 35vw, 25rem);
}

@media (width < 48rem) {
    .content-section, .content-section.flipped-layout {
        flex-direction: column;
    }
    .content-section .content-image-container {
        width: 100%;
    }
    .content-section .content-image-container, .content-section.flipped-layout .content-image-container {
        justify-content: center;
    }
}