@charset "UTF-8";

@media (width < 768px) {
    .main__header {
        --header-padding: 32px 24px;
    }

    .main__header--with-media {
        --header-gridtemplate-columns: 1fr;
    }

    .main__header-logo {
        --logo-grid-row: 1;
    }

    .main__header--with-media .main__header-title {
        --title-grid-column: 1;
        --title-grid-row: auto;
    }

    .main__header--with-media .main__header-lead {
        --lead-grid-column: 1;
        --lead-grid-row: auto;
    }

    .main__header--with-media .main__header-actions {
        --actions-grid-column: 1;
        --actions-grid-row: auto;
    }
}

@media (960px <= width) {
    .main__header {
        border-radius: 8px;
    }
}

.main {
    max-width: 960px;
    width: 100%;
}

.main__header {
    background-color: color-mix(in srgb, var(--gray-200) 50%, transparent);
    display: grid;
    grid-gap: 32px 0;
    grid-template-columns: var(--header-gridtemplate-columns, 1fr);
    padding: var(--header-padding, 48px 32px);
}

.main__header--with-media {
    grid-gap: 24px 32px;
    grid-template-columns: var(--header-gridtemplate-columns, auto 1fr);
}

.main__header-logo {
    grid-row: var(--logo-grid-row, 1 / span 3);
    grid-column: 1;
    text-align: center;
    width: fit-content;
}

.main__header--with-media .main__header-title {
    grid-column: var(--title-grid-column, 2);
    grid-row: var(--title-grid-row, 1);
}

.main__header-tag {
    color: var(--gray-500);
    display: block;
    font-size: var(--font-size-sm);
    line-height: calc(var(--scale-md) / var(--scale-sm));
    margin-block-end: 4px;
    width: fit-content;
}

.main__header-information {
    color: var(--gray-600);
    display: block;
    font-size: var(--font-size-sm);
    line-height: calc(var(--scale-md) / var(--scale-sm));
    margin-block-start: 16px;
    width: fit-content;
}

.main__header-lead {
    color: var(--gray-600);
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.main__header--with-media .main__header-lead {
    grid-column: var(--lead-grid-column, 2);
    grid-row: var(--lead-grid-row, 2);
}

.main__header-actions {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.main__header--with-media .main__header-actions {
    grid-column: var(--actions-grid-column, 2);
    grid-row: var(--actions-grid-row, 3);
}