/* Updated Grid container for images */
.avy-image-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    justify-items: center;
    width: 100%;
    max-width: 53rem;
    margin:  0 auto;
}

/* Grid items */
.grid-item {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
    background-color: #f4f4f4;
}

/* Style for images */
.grid-item img {
    width: 17.5rem;
    height: 7rem;
    object-fit: cover;
    object-position: top;
    border-radius: var(--border-radius);
    display: block;
}

/* Medium image styling Seeley Lake Nordic */
.image-item.medium,
.image-item.large {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
    background-color: #f4f4f4;
}

.image-item.medium img,
.image-item.large img{
    width: 17.5rem;
    height: 13.75rem;
    border-radius: var(--border-radius);
    display: block;
}

/* New class for iframe container */
.iframe-container {
    width: 100%; /* Ensure the container fills the width of its parent */
    position: relative; /* Needed for aspect ratio trick */
    padding-top: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
    overflow: hidden; /* Hide overflow */
    border-radius: var(--border-radius);
}

.iframe-container iframe {
    position: absolute; /* Position the iframe absolutely within the container */
    top: 0;
    left: 0;
    width: 100%; /* Ensure the iframe fills the width of its container */
    height: 100%; /* Ensure the iframe fills the height of its container */
    border: 0;
    border-radius: var(--border-radius);
    display: block;
    z-index: 1;  /* on top 1-22-2025 */
}

.image-item h3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2; /* 1-22-2025; fixing youtube obscurring links; Set a higher z-index for the h3 element */
    background-color: #f4f4f4;
}


/* Responsive adjustments */
@media (max-width: 53rem) {    /* 838 px */

    .header h2 {
        margin: 0.5rem auto 0 auto;
        font-size: 1.15rem;
        line-height: 1;
    }

    .avy-image-container {
        grid-template-columns: repeat(1, 1fr);
        justify-content: center;
        width: 100%;
        max-width: none;
        margin: 0 auto;
        padding: 20px;  /* around containers else fill the column left to right  */
    }

    .image-item.medium,
    .image-item.large,
    .grid-item {
        width: 100%;
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--border-radius);
        text-align: center;
    }
    .image-item.medium img,
    .image-item.large img,
    .grid-item img {
        position: relative;
        width: 100%; /* Ensure images stretch to fit the container */
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 0.0625rem; /* Add space between image and buttons */
    }
}  }
}