.oak-row:has(.oak-tiles) {
    overflow: visible;
}

.oak-tiles {
    width: 100%;
    padding: var(--oak-spacing-m) var(--oak-spacing-2xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--oak-spacing-xl);
}

.oak-tile {
    display: grid;
    grid-template-columns: 1fr 2fr;
    background-color: var(--oak-white);
    border-radius: var(--oak-radius-l);
    overflow: hidden;
}

.oak-tile:has(.oak-tile-content:only-child),
.oak-tile:has(.oak-tile-image:only-child) {
    grid-template-columns: 1fr;
}

.oak-tile-image {
    background-size: cover;
    background-position: center;
    aspect-ratio: auto;
}

.oak-tile-image:only-child {
    aspect-ratio: 16/9;
}

.oak-tile-content {
    padding: var(--oak-spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--oak-spacing-m);
}

@media (max-width: 1920px) {
    .oak-tiles {
        padding: var(--oak-spacing-m) var(--oak-spacing-xl);
    }
}

@media (max-width: 1440px) {
    .oak-tiles {
        padding: var(--oak-spacing-m);
    }

    .oak-tile {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .oak-tile-image,
    .oak-tile-image:only-child {
        aspect-ratio: 1;
    }
}

@media (max-width: 1024px) {
    .oak-tiles {
        padding: 0;
        grid-template-columns: 1fr;
    }

    .oak-tile {
        grid-template-columns: 1fr 2fr;
    }

    .oak-tile-image {
        aspect-ratio: auto;
    }

    .oak-tile-image:only-child {
        aspect-ratio: 16/9;
    }
}

@media (max-width: 768px) {
    .oak-tile-content {
        padding: var(--oak-spacing-xl) var(--oak-spacing-m);
    }

    .oak-tile-image:only-child {
        aspect-ratio: 1;
    }
}

@media (max-width: 512px) {
    .oak-tile {
        grid-template-columns: 1fr;
    }

    .oak-tile-image,
    .oak-tile-image:only-child {
        aspect-ratio: 1;
    }

    .oak-tile-content {
        padding: var(--oak-spacing-l) var(--oak-spacing-s);
    }
}