.fp-hero {
    padding: 0 var(--spacing-small) !important;
    position: relative;
}

.fp-hero .section-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--spacing-small);
    row-gap: 2.5rem;
    max-width: 100%;
    background: var(--pale);
    padding: var(--spacing-large) var(--spacing-medium);
    border-radius: var(--border-radius-default);
    overflow: hidden;
}

.fp-hero .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    column-gap: 0;
    row-gap: 0;
    z-index: 2;
}

.fp-hero h1 {
    text-align: center;
    max-width: 15ch;
    margin-bottom: 1rem;
}

.fp-hero .cursive {
    font-size: var(--font-size-h1) !important;
}

.fp-hero .content p {
    text-align: center;
}

.fp-hero .items {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: var(--spacing-small);
    row-gap: var(--spacing-tiny);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-small);
    max-width: 55ch;
}

.fp-hero .centered-text {
    text-align: center;
    margin-bottom: 1.5rem;
    max-width: 60ch;
}

.fp-hero .item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 0;
    row-gap: 0;
}

.fp-hero .item p {
    font-weight: var(--font-weight-bold) !important;
}

.fp-hero .circle {
    border-radius: 100%;
    background: var(--color-1);
    width: 7px;
    height: 7px;
    margin-right: var(--spacing-tiny);
}

.fp-hero .img-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    overflow: visible;
}

.fp-hero .hero-img {
    aspect-ratio: 1;
    overflow: hidden;
    object-fit: cover;
    width: 23rem;

    @media (max-width: 640px) {
        width: 16rem;
    }
}

.fp-hero .blob-background {
    width: 19rem;
    rotate: 25deg;

    @media (max-width: 640px) {
        width: 13rem;
    }
}

.blob-mask {
    -webkit-mask-image: url(/images/blob-mask.svg);
    mask-image: url(/images/blob-mask.svg);
    mask-repeat: no-repeat;
    object-fit: cover;
    -webkit-mask-size: cover;
    mask-size: cover;
}

@media (max-width: 980px) {
    .fp-hero .section-content {
        grid-template-columns: 1fr;
    }
}

.fp-hero .illustration-tl {
    top: -5rem;
    left: -5rem;
}

.fp-hero .illustration-tr {
    top: -2rem;
    right: -7rem;
}

.fp-hero .illustration-bl {
    bottom: -5rem;
    left: -5rem;
}

@media (max-width: 1150px) {
    .fp-hero .illustration-tl {
        top: -8rem;
        left: -6rem;
    }

    .fp-hero .illustration-tr {
        top: -6rem;
        right: -6rem;
    }

    .fp-hero .illustration-bl {
        bottom: -6rem;
        left: -6rem;
    }
}

@media (max-width: 640px) {
    .fp-hero .illustration-tl {
        top: -11rem;
        left: -6rem;
    }

    .fp-hero .illustration-tr {
        top: -10rem;
        right: -7rem;
    }

    .fp-hero .illustration-bl {
        bottom: -8rem;
        left: -8rem;
    }
}