.gh-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(8rem, 13.64vw + 2.55rem, 20rem);
    padding-bottom: clamp(8rem, 13.64vw + 2.55rem, 20rem);
}

.gh-header:not(.has-background-image):not(.has-background-color) {
    max-width: var(--container-width, 1200px);
    margin: 0 auto 40px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.gh-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    word-break: break-word;
}

.gh-header-primary {
    font-size: calc(clamp(3rem, 2.05vw + 3rem, 6rem) * var(--font-multiplier, 1));
    line-height: 1.2;
}

.is-font-serif:not([class*=" gh-font-heading"]):not([class^="gh-font-heading"]) .gh-header-primary {
    font-family: var(--gh-font-heading, var(--font-serif));
    line-height: 1.1;
}

.gh-header-secondary {
    font-size: calc(2.4rem * var(--font-multiplier, 1));
}

.gh-header-primary + .gh-header-secondary {
    margin-top: 20px;
}

.gh-header-action {
    margin-top: 40px;
}

.gh-header-button {
    --multiplier: 1.2;

    font-size: 2rem;
}

.gh-header-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 480px;
    height: 56px;
    padding: 0 4px 0 20px;
    color: var(--color-secondary-text);
    cursor: pointer;
    background-color: var(--color-border);
    border: 0;
    border-radius: 48px;
}

.gh-header-image + .gh-header-content .gh-header-input {
    color: var(--color-secondary-text-dark);
    background-color: #fff;
}

.gh-header-input span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 8px);
    padding: 0 24px;
    font-weight: 600;
    color: #fff;
    background-color: var(--ghost-accent-color);
    border-radius: 32px;
}

.gh-header-input[data-ghost-search] span {
    aspect-ratio: 1;
    padding: 0;
    color: var(--color-darker-gray);
    background-color: transparent;
}

/* With background image or color */

.gh-header[class*="has-background"] {
    position: relative;
    margin-bottom: 80px;
}

.gh-header[class*="has-background"] .gh-header-content {
    position: relative;
    z-index: 20;
}

.gh-header[class*="has-background"] :is(.gh-header-primary, .gh-header-secondary) {
    color: #fff;
}

.gh-header[class*="has-background"] .gh-header-input {
    border: 0;
}

.gh-header[class*="has-background"] .gh-header-button {
    color: #15171a;
    background-color: #fff;
}

/* With background image */

.gh-header.has-background-image::before {
    position: absolute;
    inset: 0;
    z-index: 10;
    content: "";
    background-color: #15171a;
    opacity: 0.5;
}

.gh-header.has-background-image .gh-header-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* With background color */

.gh-header.has-background-color {
    background-color: var(--ghost-accent-color);
}

/* Side by side */

.gh-header.is-side {
    padding-top: 80px;
    padding-bottom: 120px;
}

.gh-header.is-side .gh-header-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.gh-header.is-side .gh-header-image {
    position: static;
}

.gh-header.is-side .gh-header-content {
    align-items: flex-start;
    padding-left: 32px;
    text-align: left;
}