/* v1 */
.img-headline-list.v1 .bg-box {
    grid-area: 1/3/span 4/span 3;
    aspect-ratio: 558/766;
    margin-top: max(64px, 5vw);
    border-bottom-left-radius: 100vmin;
}

.img-headline-list.v1 .img-container {
    grid-area: 1/5/span 2/span 2;
    aspect-ratio: 360/360;
}

.img-headline-list.v1 .logo-icon-container {
    grid-area: 1/5/span 2/span 2;
    align-self: flex-end;
    transform: translate(-50%, -50%);
    width: fit-content;
    position: absolute;
    top: 0;
    z-index: 1;
}

.img-headline-list.v1 .headline {
    grid-area: 3/4/3/span 4;
    margin-top: max(32px, 2.890625vw);
}

.img-headline-list.v1 .list-container {
    grid-area: 1/8/span 4/span 4;
    margin-top: max(64px, 10.46875vw);
}

/* v2 */
.img-headline-list.v2 .headline {
    grid-area: 1/3/span 1/span 4;
    margin: max(32px, 3.75vw) 0 0;
}

.img-headline-list.v2 .logo-icon-container {
    grid-area: 1/7/span 1/span 1;
    align-self: flex-end;
    transform: translate(-50%, -50%);
    width: fit-content;
    position: absolute;
    top: 0;
    z-index: 1;
}

.img-headline-list.v2 .list-container {
    grid-area: 2/4/span 2/span 5;
    margin-top: var(--m-60);
}

.img-headline-list.v2 .img-container {
    grid-area: 1/10/span 3/span 4;
    aspect-ratio: 750/750;
    margin-top: var(--m-large);
}

@media (max-width: 1499.98px) {
    .img-headline-list.v1 .list-container {
        grid-area: 1/8/span 4/span 5;
    }

    .img-headline-list.v2 .headline {
        grid-area: 1/2/span 1/span 5;
    }

    .img-headline-list.v2 .logo-icon-container {
        grid-area: 1/8/span 1/span 1;
    }

    .img-headline-list.v2 .list-container {
        grid-area: 2/3/span 2/span 6;
    }

}

@media (max-width: 1199.98px) {
    .img-headline-list.v1 .list-container {
        grid-area: 1/8/span 4/span 6;
    }

    .img-headline-list.v1 .bg-box {
        grid-area: 1/2/span 4/span 4;
    }

    .img-headline-list.v1 .img-container {
        grid-area: 1/4/span 2/span 3;
    }

    .img-headline-list.v1 .logo-icon-container {
        grid-area: 1/5/span 2/span 3;
    }
}

@media (max-width: 991.98px) {
    .img-headline-list.v1 .bg-box {
        grid-area: 1/4/span 4/span 5;
    }

    .img-headline-list.v1 .img-container {
        grid-area: 1/7/span 2/span 5;
    }

    .img-headline-list.v1 .logo-icon-container {
        grid-area: 1/7/span 2/span 3;
    }

    .img-headline-list.v1 .list-container {
        grid-area: 5/4/5/span 8;
    }

    .img-headline-list.v1 .headline {
        grid-area: 3/6/3/span 6;
    }

    .img-headline-list.v2 .img-container,
    .img-headline-list.v2 .logo-icon-container {
        grid-area: 1/6/span 1/span 6;
    }

    .img-headline-list.v2 .headline {
        grid-area: 2/4/span 1/span 8;
    }

    .img-headline-list.v2 .list-container {
        grid-area: 3/4/span 1/span 8;
    }
}

@media (max-width: 767.98px) {
    .img-headline-list.v1 .list-container {
        grid-area: 5/3/5/span 10;
    }

    .img-headline-list.v2 .img-container,
    .img-headline-list.v2 .logo-icon-container {
        grid-area: 1/5/span 1/span 8;
    }

    .img-headline-list.v2 .headline {
        grid-area: 2/3/span 1/span 10;
    }

    .img-headline-list.v2 .list-container {
        grid-area: 3/3/span 1/span 10;
    }
}

@media (max-width: 575.98px) {
    .img-headline-list.v1 .bg-box {
        grid-area: 1/2/span 4/span 8;
    }

    .img-headline-list.v1 .img-container {
        grid-area: 1/7/span 2/span 7;
    }

    .img-headline-list.v1 .headline {
        grid-area: 3/4/3/span 10;
    }

    .img-headline-list.v1 .list-container {
        grid-area: 5/2/5/span 12;
    }

    .img-headline-list.v2 .img-container,
    .img-headline-list.v2 .logo-icon-container {
        grid-area: 1/4/span 1/span 10;
    }

    .img-headline-list.v2 .headline {
        grid-area: 2/2/span 1/span 12;
    }

    .img-headline-list.v2 .list-container {
        grid-area: 3/2/span 1/span 12;
    }
}