.dashed-line .line-container {
    grid-area: 1/1/1/span 14;
    width: 100%;
    overflow: hidden;
}

.dashed-line .line-container .line {
    width: 115%;
    height: 2px;
    background-image: repeating-linear-gradient(
        to right,
        var(--black) 0 10px,
        transparent 10px 20px
    );
    transition: transform;
    will-change: transform ease-in-out 1s;
}

.dashed-line .icon-container {
    width: var(--m-lg);
    aspect-ratio: 1/1;
    background: var(--white);
	padding: max(16px, 1.25vw);
    border-radius: 100vmin;
    z-index: 1;  
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%231d1b19' stroke-width='2' stroke-dasharray='10' vector-effect='non-scaling-stroke'%3E%3Ccircle cx='75' cy='75' r='75' stroke='none'/%3E%3Ccircle cx='75' cy='75' r='74' fill='none'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: rotate(5deg);
}

.dashed-line .icon-container.right {
    grid-area: 1/12/1/span 2;
}

@media (max-width: 767.98px) {
    .dashed-line .icon-container {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75' viewBox='0 0 75 75'%3E%3Cg fill='none' stroke='%231d1b19' stroke-width='2' stroke-dasharray='7'%3E%3Ccircle cx='37.5' cy='37.5' r='37.5' stroke='none'/%3E%3Ccircle cx='37.5' cy='37.5' r='37' fill='none'/%3E%3C/g%3E%3C/svg%3E");
    }

    .dashed-line .icon-container.right {
        grid-area: 1/2/1/span 12;
        justify-self: center;
    }
}