.service-banner {
    background-image: linear-gradient(to right bottom, var(--page-background-color), var(--page-background-color-light));
    container-type: inline-size;
    container-name: service-banner;
    display: grid;
}

.service-banner__content {
    aspect-ratio: 3/2;
    padding: var(--padding-s) var(--padding-s) 5vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-s);
}

.service-banner__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xs);
}

.service-banner__meta {
    display: flex;
    gap: var(--gap-xs);
}

.service-banner__title {
    font-size: clamp(var(--typo-title-s-font-size), 4cqw, var(--typo-title-m-font-size));
    color: var(--text-bright-color);
    text-align: center;
    line-height: 1.15;
}

.service-banner__img {
    display: block;
    flex-grow: 1;
    height: 10px;
}

@container service-banner (width < 40rem) {
    .service-banner__content {
        aspect-ratio: 3.5/3;
    }
}