*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

table{
  border-collapse: collapse;
  margin: 0 auto;
}
th, td{
  padding: 10px;
}
h1{
  width: 80%;
  margin: 30px auto;
  margin-bottom: 30px;
}
.card button{
  width: 100%;
  border: none;
}

section{
  text-align: center;
}
button{
  margin-top: 10px;
}

.sale{
  position: relative;

}
.btn_close{
  color: red;
  float: right;
  cursor: pointer;
  font-size: 30px;

}
.modal_stock{
  display: none;
  background-color: #a6b5a3;
  border-radius: 20px;
  width: 40%;
  height: auto;
    padding: 30px;
  margin: 0 auto;
  position: fixed;
  top:20vh;
  left: 30vw;
  z-index: 15;


}


.modal_stock h5{
color: #df361f;
font-size: 30px;
margin-bottom: 20px;
}
.modal_stock img{
  width: 80%;
  margin:0 auto;
  margin-bottom: 20px;
}

.box_sale{
  width: 90%;
  margin: 0 auto;
  padding: 20px;
  border-radius: 20px;
  background-color: #a6b5a3;
}

.collapsible {
    background-color:#a4655f;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    border-radius: 0;
}
.right{
  float: right;
}
.activ, .collapsible:hover {
    background-color: #00A287;
}

.content {
    padding: 20px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
}

.grid_gal{
  margin-top: 370px;
}
/* Галерея */
.gallery {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 5vw);
    grid-gap: 15px;
}
.galleryy__img .image{
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;

}
.gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease-in-out;
}
.gallery__img:hover{
transform: scale(1.2);
}
.item_1 {
 grid-column-start: 1;
 grid-column-end: 3;
 grid-row-start: 1;
 grid-row-end: 3;
}
.item_2 {
 grid-column-start: 3;
 grid-column-end: 5;
 grid-row-start: 1;
 grid-row-end: 3;
}
.item_3 {
 grid-column-start: 5;
 grid-column-end: 9;
 grid-row-start: 1;
 grid-row-end: 6;
}
.item_4 {
 grid-column-start: 1;
 grid-column-end: 5;
 grid-row-start: 3;
 grid-row-end: 6;
}
.item_5 {
 grid-column-start: 1;
 grid-column-end: 5;
 grid-row-start: 6;
 grid-row-end: 9;
}
.item_6 {
 grid-column-start: 5;
 grid-column-end: 9;
 grid-row-start: 6;
 grid-row-end: 9;
}
.modal{
  top: 100px;
  z-index: 7;
}
.modal-body img{
  width: 40%;
  background-color: #33ac90;
}
.modal-header, .modal-footer{
  background-color:  #00A287;
}
@media screen and (max-width : 400px){
  .gallery{
    display: block;
    width: 100%;
    /* max-width: 240px; */

  }
.gallery .image{
    display: block;
    margin: 2% 0;
  }
  .gallery .image img:hover{
   transform: scale(1.1);
  }
}
/* @media screen and (max-width:940px) {
  .left, .right{
    width: 100%;
    margin: 10px auto;
    /* text-align: center; */
  /* } */


@media screen and (max-width : 400px){
  .modal_stock{
    width: 90%;
  left: 5%;
      top: 27vh;
  }
  .modal_stock h5{
    font-size: 20px;
  }
}