.section--small {
    max-width: 55ch;
    margin-right: auto;
    margin-left: auto;
}

.section--longbottom {
    padding-bottom: 8rem;
}

@media (min-width: 800px) {
    .section--longbottom {
        padding-bottom: 15rem;
    }
}

.section__image {
    display: block;
    width: calc(100% + 2 * var(--space-smaller));
    margin-top: calc(var(--space-medium) * -1);
    margin-bottom: var(--space-medium);
    margin-left: calc(var(--space-smaller) * -1);

    filter: blur(0.7px);
}

@media (min-width: 800px) {
    .section__image {
        width: calc(100% + 2 * var(--space-large));
        margin-left: calc(var(--space-large) * -1);

        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
}

.section__title {
    display: flex;
    margin-top: var(--space-medium);
    margin-bottom: var(--space-large);

    align-items: center;
    justify-content: center;

    font-family: var(--font-family-title);
    letter-spacing: 0.01em;
    text-align: center;
}

.section__title h1 {
    overflow: hidden;

    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;

    color: var(--color-accent-text-contrast);
    font-size: 1.5em;
    line-height: 1.1;

    text-overflow: ellipsis;
}

.section__title h1::after {
    content: "";

    display: block;
    max-width: 50%;
    height: 2px;
    margin-top: 0.2em;
    margin-right: auto;
    margin-left: auto;

    background-color: var(--color-accent-line);
    border-radius: var(--radius);
}

.section__title h1 .icon {
    margin-right: 1rem;

    vertical-align: middle;
}

.section__intro {
    max-width: 50ch;
    margin: var(--space-large) auto;

    font-style: italic;
    text-align: center;
}

@media (min-width: 800px) {
    .section__intro {
        margin-top: calc(var(--space-medium) * 2.5);
        margin-bottom: calc(var(--space-medium) * 2.5);
    }
}

.section__meta {
    display: flex;
    max-width: 55ch;
    margin-right: auto;
    margin-bottom: var(--space-medium);
    margin-left: auto;

    flex-direction: column;
    align-items: center;
}

@media (min-width: 800px) {
    .section__meta {
        flex-direction: row;
        align-items: baseline;
    }
}

.section__details {
    flex-grow: 1;

    text-align: center;
}

@media (min-width: 800px) {
    .section__details {
        text-align: left;
    }
}

.section__actions {
    display: flex;

    gap: var(--space-small);

    flex-shrink: 0;
}

.subsection {
    margin-top: var(--space-large);
    margin-bottom: var(--space-large);
}

.subsection--small {
    max-width: 55ch;
    margin-right: auto;
    margin-left: auto;
}

.subsection__title {
    margin-top: 0;
    margin-bottom: 0;

    font-family: var(--font-family-title);
    letter-spacing: 0.01em;
}
