.headline-three-liner-deer {
    overflow-x: clip;
}

.headline-three-liner-deer .headline {
    grid-area: 1/2/1/span 12;
}

.headline-three-liner-deer .inner-container {
    grid-area: 2/1/2/span 14;
    grid-template-columns: 1fr auto auto 1fr;
    grid-column-gap: var(--m-sm);
}

.headline-three-liner-deer .inner-container .line {
    width: 100%;
    min-width: 64px;
    height: 2px;
    background-image: repeating-linear-gradient(
        to right,
        var(--black) 0 10px,
        transparent 10px 20px
    );
    transition: transform ease-in-out 1.5s;
    will-change: transform ease-in-out 1.5s;
}

.headline-three-liner-deer .inner-container .line.line-before {
    transform: translateX(-100%);
}

.headline-three-liner-deer .inner-container .line.line-after {
    transform: translateX(100%);
}

.headline-three-liner-deer.isInView .inner-container .line.line-before,
.headline-three-liner-deer.isInView .inner-container .line.line-after {
    transform: translateX(0%);
}

.headline-three-liner-deer .inner-container .three-liner .text {
    margin-left: var(--indent);
    line-height: 1.1;
}

.headline-three-liner-deer .inner-container .icon-container,
.headline-three-liner-deer .inner-container .icon-container img  {
    max-width: max(164px, 19.375vw);
    max-height: max(200px, 23.75vw);
}

.headline-three-liner-deer .inner-container .icon-container.hidden {
    display: none;
}

@media (max-width: 767.98px) {
    .headline-three-liner-deer .inner-container {
        grid-template-columns: 1fr auto 1fr;
    }

    .headline-three-liner-deer .inner-container .three-liner {
        grid-area: 1/1/1/span 3;
        justify-self: center;
        display: block;
        max-width: 16ch;
        text-align: center;
        margin-bottom: var(--m-sm);
        margin-right: 0 !important;
    }

    .headline-three-liner-deer .inner-container .three-liner .text {
        margin-left: 0;
    }

    .headline-three-liner-deer .inner-container .line {
        height: 1px;
        background-image: repeating-linear-gradient( to right, var(--black) 0 5px, transparent 5px 10px );
    }

    .headline-three-liner-deer .inner-container .icon-container {
        max-width: max(160px, 19.375vw);
        grid-area: 2/2/2/2;
        margin-left: 0 !important;
    }
}