/* Grid container for current images */
.current-conditions-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem; /* not working for horizontal - fixed by nuking justify-items: center;*/
    width: 100%;
    max-width: 56.25rem;
    margin: 0 auto;
}

.conditions-grid-item {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
    width: 100%; /* Set a fixed width for all large items */
    height: 15rem;
    overflow: hidden; /* Prevent overflow */
    background-color: #f4f4f4;
}
.conditions-grid-item img {
    width: 100%; /* Make image fill the container width */
    height: 100%; /* Maintain aspect ratio */
    display: block;
    object-fit: cover;
}
.conditions-grid-item video {
    width: 100%; /* Make the video fill the container width */
    height: 100%; /* Maintain aspect ratio */
    object-fit: cover; /* Use cover to maintain aspect ratio */
}
.video-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0.25rem; /* not working for horizontal - gave up */
    justify-items: center;
    width: 100%;
    max-width: 56.25rem;
    margin: 1.25rem auto 0 auto; /* Top, right, bottom, left */
}
.youtube-container {
    width: 26.375rem; /* Set the desired width */
    aspect-ratio: 16 / 9;
    overflow: hidden; /* Hide any overflow */
    position: relative;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
}
.youtube-container iframe {
    width: 100%;
    height: 100%;
        transform: scale(1.01); /* Slightly enlarge the iframe; getting rid of vertical black lines only edge & firefox */
        -moz-transform: scale(1.01); /* Firefox-specific */
        -ms-transform: scale(1.01); /* Edge-specific */
    object-fit: fill;
    border: none; /* Remove the border */
    outline: none;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--border-radius);
}
/* Responsive adjustments */
@media (max-width: 52.375rem) {

    .avy-image-container {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }

    .video-container {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 36rem) {
    .current-conditions-container {
        grid-template-columns: 1fr;
        width: 95%;
    }
}