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

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

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

.sp-hero h1 {
    text-align: center;
    max-width: 30ch;
    margin-top: 0;
}

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

.sp-hero .items {
    display: flex;
    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;
}

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

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

.sp-hero .text-wrapper {
    max-width: 80ch;
}

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

.sp-hero .illustration-tr {
    top: -2rem;
    right: -5rem;
}

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

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

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

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

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

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

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

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

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

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

    .sp-hero .illustration-bl {
        bottom: -9rem;
        left: -9rem;
    }
}