.defaultDetails {
    display: grid;
    gap: var(--marginSmallMedium);
}

.defaultDetails img {
    border-radius: var(--borderRadiusMedium);
}

.defaultDetails__main {
    display: flex;
    flex-direction: column-reverse;
}

.defaultDetails__content :is(h2, h3, h4, h5, h6) {
    color: var(--primaryColor500);
}

.defaultDetails__content h2 {
    font-size: var(--h3Size);
}

.defaultDetails__imageWrapper {
    margin-block-end: calc(2 * var(--marginSmallMedium));
}

/* make video as wide as content */
.defaultDetails__content iframe {
    width: 100%;
}

/**
 * Aside
 */

.defaultDetails__aside {
    padding: var(--marginMedium);
    border-radius: var(--borderRadiusLarge);
    background-color: var(--baseLight100);
}

.defaultDetails__asideTitle,
.defaultDetails__sectionTitle {
    margin-block-end: var(--marginExtraSmallMedium);
    font-size: var(--h3Size);
}

.defaultDetails__sectionTitle {
    font-size: var(--h4Size);
}

.defaultDetails__section:not(:last-child) {
    border-bottom: 1px solid var(--baseLight400);
    padding-block-end: var(--marginMedium);
    margin-block-end: var(--marginMedium);
}

.defaultDetails__imageLocationWrapper {
    margin-block-start: var(--marginMedium);
}

.defaultDetails__metaItem {
    display: flex;
    overflow-wrap: break-word;
    hyphens: auto;
}

.defaultDetails__metaItem:not(:last-of-type) {
    margin-block-end: var(--marginExtraSmallMedium);
}

/* '-' in email can be confusing so we don't use hyphens */
.--contact .defaultDetails__metaItem {
    overflow-wrap: anywhere;
    hyphens: none;
}

.defaultDetails__metaItem a {
    color: inherit;
    font-weight: 400;
}

.defaultDetails__icon {
    color: var(--secondaryColor500);
}

.defaultDetails__section.--support .ctaButton::after {
    content: none;
}

@media (min-width: 768px) {
    .defaultDetails {
        grid-template-columns: min(400px, 45%) 1fr;
        align-items: flex-start;
    }

    .defaultDetails__aside {
        position: sticky;
        top: calc(var(--headerHeight) + 2rem);
    }
}

/*
 * Vacancy detail page
 */

.defaultDetails.--vacancy .ctaButton {
    margin-top: var(--marginSmallMedium);
}