.Air-container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    background-color: white;
}
.Air-container > div {
    position: relative;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #f4f4f4;
    width: 250px;
    height: 300px;
    margin: .3125rem;
    text-align: center;
    overflow: hidden;
    line-height: 1.5625rem;
    font-size: 1.125rem;
}
.Air-container img {
    position: absolute;
    width:100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    top: 1.4375rem;
    border-radius: var(--border-radius);
}
.air_widget {
    border: none;
    height: 100%;
    width: 230px;
}
.forecast_widget {
    width: 100%;
    height: 100%;
    border: none; /* Remove default iframe border */
    position: absolute; /* Absolute positioning inside the parent */
    top: -0.615rem; /* making them fit */
    left: -0.615rem;
    transform: scale(1.21, 1.2); /* horizontal, vertical; Scale up the content */
    transform-origin: top left; /* Start scaling from top-left corner */
}
.lightening-iframes {
    border: none;
    border-radius: var(--border-radius);
    position: absolute;
    width:100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    top: 1.4375rem;
}
@media screen and (max-width: 401px) {
    .Air-container > div {
        width: 250px;
        height: 302px;
        margin: .3125rem;
        /* maybe use the -10px bit to fix centering */
    }

    .air_widget {
        width: 100%;
        height: 100%;
    }

    /*.forecast_widget {
        width: 230px;  Adjust the width to fit within the container */
      /*   height: 300px;
        transform: none; Remove scaling for smaller screens */
      /*  position: relative;  Ensure they stay inside the parent div
        top: -8px;
        left: 0;
    }*/

    .lightening-iframes {
        width: 100%;
        height: 100%;
        position: relative;
        top: 0;
        left: 0;
    }
}