/*====================================================================*/
/*------------------------ PLAN-INFO GALLERY -------------------------*/
/*====================================================================*/

/* Thumbnail strip below the office plan image; opens blueimp lightbox. */

.plan-info__gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;

    max-width: 43rem;
    margin-top: 2.5rem;
    padding: 0;

    list-style: none;
}

.plan-info__gallery-item {
    flex: 0 0 calc(25% - 1.125rem);
}

@media (max-width: 29.99375em) {

    .plan-info__gallery-item {
        flex-basis: calc(33.333% - 1rem);
    }
}

.plan-info__gallery-link {
    position: relative;

    display: block;

    font-size: 0;

    outline: none;

    will-change: opacity;
}

.plan-info__gallery-link:hover {
    opacity: 0.9;
}

@media (hover: none) {

    .plan-info__gallery-link:hover {
        opacity: 1;
    }
}

.plan-info__gallery-link:before {
    content: "";

    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    z-index: 2;

    width: calc(100% - 0.4rem);
    height: calc(100% - 0.4rem);

    border: 0.2rem solid transparent;

    transition: inherit;
}

.plan-info__gallery-link:focus:before {
    border-color: #000;
}

.plan-info__gallery-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;

    object-fit: cover;
}