body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #666;
  font-size: 15px;
  background-color: white;
}
.carousel {
  position: relative;

}


.video-gal{
/*    display: flex;*/
margin: 100px 7vw 70px 7vw;
/*    justify-content: space-between;*/
overflow: hidden;
}

.video-gal ul {
/*  height: calc(25vh + 12vw);*/
width: 9999px;
margin: 0;
padding: 0;
list-style: none;
transition: margin-left 250ms;
font-size: 0;
}

.video-gal li {
  display: inline-block;
  position: relative;
}

video{
    height: 30vh;
    margin-right: 10px;
    border-radius: 10px;
}

.play-button {
  position: absolute;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
  background-image: url("./svg-img/play.png");
  background-size: cover;
/*  transform: translate(-50%, -50%);*/
  width: 48px; /* Задайте ширину и высоту для значка */
  height: 48px;
  cursor: pointer;

}

.arrow {
    z-index: 1;
    padding: 0;
    position: absolute;
    top: 0px;
    background: none;
    border: none;
    display: block;
}

.arrow{
  width: 32px;
  height: 30vh;
}
.arrow svg path{
    fill: white;
}
.arrow:focus {
  outline: none;
}

.arrow:hover{
  cursor: pointer;
}

.arrow:hover svg path {
  fill: lightgrey;
  
}

.prev {
  left: 7vw;
}

.next {
  right: 7vw;
}

#page {
  margin: 0 7vw 7vw 7vw;
  display: grid;
/*  width: 100%;*/
height: calc(300vh - 100px); 
grid-template-areas:
"a a b b g"
"c d b b h"
"c e f i i"
"j j k k k"
"l n k k k"
"m n o o p"
"q q r r s"
"t u r r x"
"t v w y y";
/*   grid-template-rows: 1fr 1fr 1fr;*/
grid-template-columns: 2fr 1fr 1fr 0.5fr 1fr;
gap: 10px;

}

.item {
  background-size: cover;
  background-position: center;
  border-radius: 10px;
}

.item:nth-child(1){
  grid-area: a;
  cursor: pointer;
  background-image: url("./img-for-gallery/2023_12_02_12_09_IMG_8166.jpg");
}

.item:nth-child(2){
  grid-area: b;
  background-image: url("./img-for-gallery/2023_12_02_04_44_IMG_8143.jpg");
}

.item:nth-child(3){
  grid-area: c;
  background-image: url("./img-for-gallery/IMG_8293.jpg");
}

.item:nth-child(4){
  grid-area: d;
  background-image: url("./img-for-gallery/2023_12_04_08_21_IMG_8219.jpg");
}

.item:nth-child(5){
  grid-area: e;
  background-image: url("./img-for-gallery/2023_12_04_09_59_IMG_8228.jpg");
}

.item:nth-child(6){
  grid-area: f;
  background-image: url("./img-for-gallery/2023_12_04_09_07_IMG_8225.jpg");
}
.item:nth-child(7){
  grid-area: g;
  background-image: url("./img-for-gallery/2023_12_04_08_19_IMG_8216.jpg");
}

.item:nth-child(8){
  grid-area: h;
  background-image: url("./img-for-gallery/2023_12_02_05_07_IMG_8147.jpg");
}
.item:nth-child(9){
  grid-area: i;
  background-image: url("./img-for-gallery/2023_12_02_08_52_IMG_8159.jpg");
}

.item:nth-child(10){
  grid-area: j;
  background-image: url("./img-for-gallery/IMG_8233.jpg");
}

.item:nth-child(11){
  grid-area: k;
  background-image: url("./img-for-gallery/2023_12_02_05_58_IMG_8154.jpg");
}

.item:nth-child(12){
  grid-area: l;
  background-image: url("./img-for-gallery/2023_12_04_08_21_IMG_8221.jpg");
}

.item:nth-child(13){
  grid-area: m;
  background-image: url("./img-for-gallery/2023_12_02_12_32_IMG_8183.jpg");
}

.item:nth-child(14){
  grid-area: n;
  background-image: url("./img-for-gallery/IMG_8345.jpg");
}

.item:nth-child(15){
  grid-area: o;
  background-image: url("./img-for-gallery/IMG_8411.jpg");
}
.item:nth-child(16){
  grid-area: p;
  background-image: url("./img-for-gallery/IMG_8351.jpg");
}

.item:nth-child(17){
  grid-area: q;
  background-image: url("./img-for-gallery/DJI_0050.jpg");
}

.item:nth-child(18){
  grid-area: r;
  background-image: url("./img-for-gallery/2023_12_02_05_53_IMG_8151.jpg");
}

.item:nth-child(19){
  grid-area: s;
  background-image: url("./img-for-gallery/2023_12_04_12_33_IMG_8235.jpg");
}

.item:nth-child(20){
  grid-area: t;
  background-image: url("./img-for-gallery/IMG_8409.jpg");
}

.item:nth-child(21){
  grid-area: u;
  background-image: url("./img-for-gallery/IMG_8413.jpg");
}

.item:nth-child(22){
  grid-area: v;
  background-image: url("./img-for-gallery/IMG_8347.jpg");
}
.item:nth-child(23){
  grid-area: w;
  background-image: url("./img-for-gallery/megionIMG.jpg");
}
.item:nth-child(24){
  grid-area: x;
  background-image: url("./img-for-gallery/2023_12_02_08_59_IMG_8161.jpg");
}
.item:nth-child(25){
  grid-area: y;
  background-image: url("./img-for-gallery/2023_12_02_04_47_IMG_8145.jpg");
}


.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 4; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}


/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


@media  (max-width: 800px) {
    #page {

        height: calc(200vh - 120px);
        grid-template-areas:
        "a a b b"
        "d n b b"
        "e n i i"
        "j j k k"
        "c c k k"
        "c c o o"
        "m l l l"
        "f l l l"
        "h h h h"
        "p p p g"
        "p p p g"
        "q v v v"
        "u v v v"
        "y y y y"
        "r s t t"
        "x x w w";
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 3px;
    }
    body{
        font-size: calc(1vw + 1vh);
    }
    .modal-content {
        width: 100%;
    }

    video{
        height: 15vh;
    }

    .video-gal{
        margin: 70px 7vw 20px 7vw;
    }

    .arrow{
      width: 16px;
      height: 15vh;
  }


}