.l-layout--No {
    padding-top: 0;
}

@media screen and (min-width: 500px) {
    .l-layout--No {
        padding-bottom: 0;
    }
}

.at-valueHighlight {
    position: relative;
}

.at-valueHighlight__inner {
    margin-block: 2em;
}

.at-valueHighlight__content {
    padding-bottom: 2em;
}

.at-valueHighlight__highlights {
    margin: 0;
    padding: 0;
    list-style: none;
}

.at-valueHighlight__highlight {
    position: relative;
    padding-right: 10px;
    padding-left: 1.75em;
    margin-bottom: 1em;
}

.at-valueHighlight__highlight--noIcon::before,
.at-valueHighlight__highlightIcon {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    text-align: center;
}

.at-valueHighlight__highlight--noIcon::before {
    content: '\2713';
    font-family: var(--fam-icons);
    color: var(--green-600);
}

.at-valueHighlight__highlightIcon svg {
    fill: currentColor;
    margin-top: 2px;
    width: auto;
    height: 16px;
}

.at-valueHighlight__intro p {
    margin-bottom: 1em;
}

.at-valueHighlight__highlights + .at-valueHighlight__button {
    margin-top: 1em;
}

.at-valueHighlight__imageContainer {
    position: relative;
}

.at-valueHighlight__pictureFrame {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.at-valueHighlight__imageSizer {
    position: relative;
    overflow: hidden;
    height: 0;
    width: 100%;
    border-radius: var(--radius-l);
}

@media screen and (min-width: 720px) {
    .at-valueHighlight__content {
        position: relative;
        padding-bottom: 5em;
        z-index: 1;
    }

    .at-valueHighlight__imageContainer--left {
        order: -1;
    }
}

/**
 * Swiper
 */

.swiper {
    position: absolute !important;
    inset: 0;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: url(/ui/procurios-2019/img/loading.svg) no-repeat center;
    background-size: 50px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.at-valueHighlight .swiper-pagination {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
    margin-top: 1em;
    padding-inline: 1.5em;
}

.swiper-custom-bullet img {
    display: block;
    opacity: 0.5;
    filter: grayscale(1);
    transition: all 0.2s ease;
}

.swiper-custom-bullet.--active img {
    opacity: 1;
    filter: none;
}

.swiper-custom-bullet img[src*='svg'] {
    width: 100px;
    height: 60px;
}

/**
 * Squircles
 */

[class*='at-valueHighlight__shape'] {
    position: absolute;
    rotate: -10deg;
    opacity: .5;
    color: var(--papaya-300);
}

.at-valueHighlight__shape1 {
    top: -4em;
    left: -5em;
    rotate: -10deg;
    width: min(23em, 50vw);
    height: min(23em, 50vw);
}

.at-valueHighlight__shape2 {
    right: -8em;
    bottom: 0;
    width: min(12em, 24vw);
    height: min(12em, 24vw);
}

.at-valueHighlight--left {
    .at-valueHighlight__shape1 {
        right: -5em;
        left: auto;
    }

    .at-valueHighlight__shape2 {
        left: -8em;
        right: auto;
    }
}

@keyframes fadeAndMoveIn {
    0% {
        translate: 0 -4rem;
    }

    100% {
        translate: 0 4rem;
    }
}

@media (prefers-reduced-motion:no-preference) {
    @supports (animation-timeline:view()) {
        [class*='at-valueHighlight__shape'] {
            animation-timeline: view();
            animation-range: cover;
            animation-name: fadeAndMoveIn;
            animation-timing-function: ease-in-out;
        }
    }
}

/**
 * SVG doodle
 */
.at-valueHighlight__doodleContainer {
    position: relative;
    display: inline-block;
}

.at-valueHighlight__doodleContainer svg {
    fill: none;
    stroke: var(--papaya);
    stroke-width: 3px;
    stroke-miterlimit: 10;
    stroke-dasharray: 640;
    stroke-dashoffset: 640;
    stroke-linecap: round;
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 30px);
    opacity: 0;
    transform: translate(-45%, -50%) rotate(-2deg);
    transition: stroke-dashoffset 1s ease-out;
    z-index: -1;
    pointer-events: none;
}

.at-valueHighlight__doodleContainer.--visible svg {
    stroke-dashoffset: 0;
    opacity: .8;
    z-index: 0;
}

@media screen and (min-width: 720px) {
    .at-valueHighlight__doodleContainer svg {
        stroke-width: 5px;
        width: calc(100% + 50px);
    }
}