.history .headline {
    grid-area: 1/5/1/span 6;
}

.history .sticky-container {
    grid-area: 1/2/span 3/span 3;
}

.history .sticky-container .sticky-item .icon-container {
    width: max(256px, 20.625vw);
}

.history .line.vertical-line {
    grid-area: 2/6/2/span 4;
    height: var(--m-xl);
    width: var(--line-height);
    background: currentColor;
}

.history .history-container {
    grid-area: 3/6/3/span 7;
    grid-row-gap: var(--m-sm);
}

.history .history-container .history-item {
    grid-template-columns: repeat(7, 1fr);
    grid-column-gap: var(--grid-gap);
}

.history .history-container .history-item .img-container {
    grid-area: 1/1/span 4/span 4;
    aspect-ratio: 558/756;
    margin: 0 var(--m-md);
}

.history .history-container .history-item .history-headline {
    grid-area: 1/5/1/span 3;
}

.history .history-container .history-item .history-subheadline {
    grid-area: 2/5/2/span 3;
}

.history .history-container .history-item .text-container {
    grid-area: 3/5/3/span 3;
}

.history .load-more {
    grid-area: 4/2/4/span 12;
}

@media (max-width: 1199.98px) {
    .history .sticky-container {
        grid-area: 1/2/1/span 12;
    }

    .history .sticky-container .sticky-item {
        gap: var(--m-lg);
    }

    .history .sticky-container {
        grid-area: 1/2/1/span 12;
    }

    .history .headline {
        grid-area: 2/2/2/span 12;
        margin-top: var(--m-md);
    }

    .history .line.vertical-line {
        grid-area: 3/2/3/span 12;
    }

    .history .history-container {
        grid-area: 4/3/4/span 10;
    }

    .history .load-more {
        grid-area: 5/2/5/span 12;
    }
}

@media (max-width: 991.98px) {
    .history .history-container {
        grid-area: 4/2/4/span 12;
    }
}

@media (max-width: 767.98px) {
    .history .history-container {
        max-width: 480px;
        justify-self: center;
        gap: var(--m-md);
    }

    .history .history-container .history-item {
        display: flex;
        flex-direction: column;
    }

    .history .history-container .history-item .img-container {
        margin: 0;
        margin-bottom: var(--m-sm);
    }
}