:root{
    --flex-gap: 16px;
    --spec-grid-width: 420px;
    --grid-gap: 12px;
    --unit-height: 48px;
}

/*Unit Position Styles*/
.unit-position{
    container-name: unit-position;
    container-type: inline-size;
}

.unit-position.a .grid-size{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: var(--grid-gap);
    margin-inline: auto;
}

.block-unit{
    display: block;
    width:100%;
    height: var(--unit-height);
}

.unit-position.a .grid-size .block-unit:nth-of-type(13), 
.unit-position.a .grid-size .block-unit:nth-of-type(14){
    grid-column: span 2;
}

.unit-position.b .grid-size{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: var(--grid-gap);
    margin-inline: auto;
}

/*Unit Gallery Styles*/
.unit-gallery{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--flex-gap);
}

.gallery-image-main.container{
    display: block;
    position: relative;
    flex-basis: 100%;
}

.gallery-button{
    position: absolute;
    bottom: 40px;
    right: 40px;
}

.gallery-image{
    min-width: 0;
    width: 100%;
    min-height: 400px;
    object-fit: cover;
    object-position: center center;
}

.gallery-image:not(.main){
    flex-basis: calc( 50% - ( var(--flex-gap) / 2 ) );
}

@media screen and (max-width:480px){
	.gallery-image:not(.main){
		flex-basis: 100%;
	}

}

.elementor-lightbox .elementor-swiper-button-next{
  right: 20px !important;
}

.elementor-lightbox .elementor-swiper-button-prev{
  left: 20px !important;
}

.elementor-lightbox .elementor-swiper-button-next,
.elementor-lightbox .elementor-swiper-button-prev {
  position: absolute;
  width: 44px !important;
  top: 50%;
  transform: translateY(-50%);
	cursor: pointer;
	z-index: 999;
}

@media screen and (max-width: 1366px){
    .gallery-image{
        min-height: 320px;
    }
}

/*Unit Specifications Styles*/

.specifications-grid{
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( min( var( --spec-grid-width ), 100% ), 1fr ) );
    gap: var(--grid-gap); 
}

.specification{
    display: flex;
    flex-direction: row;
    gap: var(--flex-gap);
}
