.journey .circle-btns-container {
    grid-area: 1/3/1/span 2;
}

.journey > .text-container {
    grid-area: 1/5/1/span 6;
	max-width: 70ch;
}

.journey .cards-container {
    grid-area: 2/3/2/span 10;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: var(--m-md);
}

.journey .cards-container .card {
    display: grid;
    padding: 0;
    cursor: pointer;
}

.journey .cards-container .card .card-img {
    grid-area: 1/1/1/1;
    aspect-ratio: 558/806;
}

.journey .cards-container .card .card-content {
    grid-area: 1/1/1/1;
    aspect-ratio: 558/784;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    transition: var(--def-trans);
    padding: var(--m-xs);
}

.journey .cards-container .card.active .card-content {
    color: var(--blue);
    background: var(--gold);
}

.journey .cards-container .card .card-content .card-preheadline {
    margin-top: var(--m-xs);
}

.journey .cards-container .card .card-content .card-headline {
    margin-top: .25em;
}

.journey .cards-container .card .card-content .card-content-inner {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--m-xs);
    align-items: center;
    flex-grow: 1;
    max-height: 0;
    overflow: hidden;
    transition: all .5s ease;
}

.journey .cards-container .card.active .card-content .card-content-inner {
    max-height: 100%;
    margin-top: var(--m-sm);
}

.journey .cards-container .card .card-content .card-content-inner .card-text {
    grid-column: span 2;
}

.journey .cards-container .card.active .card-content .card-content-inner .card-text {
    flex-grow: 1;
    height: 100%;
    margin-bottom: auto;
    overflow-y: auto;
}

.journey .cards-container .card .arrow-btn-circle {
    grid-area: 1/1/1/1;
    margin: var(--m-xs);
}

.journey .cards-container .card .arrow-btn-circle::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-radius: 100%;
    background: var(--blue);
}

.journey .cards-container .card .arrow-btn-circle::after {
    background: var(--gold);
}

.journey .cards-container .card.active .arrow-btn-circle {
    transform: rotate(90deg);
}

.journey .cards-container .card.active .arrow-btn-circle::before {
    background: var(--gold);
}

.journey .cards-container .card.active .arrow-btn-circle::after {
    background: var(--blue);
}

@media (max-width: 1199.98px) {
    .journey .circle-btns-container {
        grid-area: 1/2/1/span 12;
        justify-self: center;
    }

    .journey > .text-container {
        grid-area: 2/2/2/span 12;
        max-width: 70ch;
        margin-top: var(--m-md);
    }

    .journey .cards-container {
        grid-area: 3/2/3/span 12;
    }
}

@media (max-width: 991.98px) {
    .journey .cards-container {
        grid-area: 3/3/3/span 10;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--m-sm);
    }

    .journey .cards-container .card {
        width: calc(50% - (var(--m-sm) / 2));
    }
}

@media (max-width: 767.98px) {
    .journey .cards-container {
        grid-area: 3/2/3/span 12;
    }
}

@media (max-width: 575.98px) {
    .journey .cards-container .card {
        width: 100%;
    }
}