﻿.image-principal img {
    aspect-ratio: 1 / 1;
}
.img-responsive--pdp {
    width: 100%;
}

.item-img-secundario:first-child {
    width: 100%;
    grid-column: span 2;
}

#all-pdp .image-secundaria {
    display: grid;
    grid-template-columns: repeat(2, minmax(auto, 1fr));
    column-gap: 16px;
    row-gap: 32px;
}

.item-img-secundario {
    position: relative;
}

.item-img-secundario img {
  margin: auto;
}

.gallery__zoom-button {
    display: none;
    position: absolute;
    align-items: center;
    color: var(--bblack);
    background-color: var(--wwhite);
    border-radius: 50%;
    border: 1px solid var(--gray3);
    height: 3rem;
    left: 1.2rem;
    justify-content: center;
    top: 1.2rem;
    width: 3rem;
}

.zoom-button__icon {
    width: 1.2rem;
    height: 1.4rem;
}

.gallery__link-item:link, .gallery__link-item:visited {
    text-decoration: none;
}

.gallery__link-item:hover {
    text-decoration: none;
}

.gallery__link-item:hover > .gallery__zoom-button {
    display: flex;
}

.gallery-modal {
}

    .gallery-modal .modal-dialog {
        margin: 0;
        width: 100%;
    }

    .gallery-modal .close-container {
        top: 0;
        right: 5rem;
    }

    .gallery-modal .close-container .boton {
        background-color: transparent;
        border: 0.5px solid var(--gray4);
        outline: none;
        height: 4rem;
        top: 2.2rem;
        width: 4rem;
    }

        .gallery-modal .close-container .boton > svg {
            fill: var(--gray3);
            stroke: none;
        }

        .gallery-modal .close-container .boton:hover > svg {
            fill: var(--gray2);
        }

    .gallery-modal .modal-content {
        border-radius: initial;
        padding: 2rem 11rem;
    }

    .gallery-modal .modal-body {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .gallery-modal .img-responsive {
        width: 100%;
    }


.g-c-pdp .swiper-wrapper {
    display: flex;
    display: --webkit-flex;
}
@media screen and (max-width: 989px) {
    .gallery__zoom-button {
        display: flex;
    }
}