.Aspect_16_9 {
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.grid {
    width: 100%;
    margin-inline: auto;
    margin-block: 0em;
    grid-auto-rows: 0fr;
}

.grid_2 {
    width: 100%;
    margin-inline: auto;
    margin-block: 0em;
    grid-auto-rows: 1fr;
}

.grid__item {
    padding: 0em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.grid {
    --gap: 2rem;
    --line-offset: calc(var(--gap) / 2);
    --line-thickness: 2px;
    --line-color: white;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    gap: var(--gap);
}

.grid_2 {
    --gap: 2rem;
    --line-offset: calc(var(--gap) / 2);
    --line-thickness: 2px;
    --line-color: white;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    gap: var(--gap);
}

.grid__item {
    position: relative;
}

    .grid__item::before,
    .grid__item::after {
        content: '';
        position: absolute;
        background-color: var(--line-color);
        z-index: 1;
    }


    .grid__item::before {
        inline-size: var(--line-thickness);
        block-size: 100vh;
        inset-block-start: 0;
        inset-inline-start: calc(var(--line-offset) * -1);
    }