@font-face {
font-family: 'tanha';
src: url('/font/tanha.ttf');
}


html, body {
    margin: 0;
    padding: 0;
    font-family: 'tanha';
  direction: rtl;
  font-size:17px;
  background-color: var(--color16);
}



:root {
--color1: #000000;
--color2: #1c1c1c;
--color3: #353535;
--color4: #4d4d4d;
--color5: #666;
--color6: #7e7e7e;
--color7: #969696;
--color8: #afafaf;
--color9: #c7c7c7;
--color10: #e0e0e0;
--color11: #d0d0d0;
--color12: #dcdcdc;
--color13: #e4e4e4;
--color14: #ececec;
--color15: #f4f4f4;
--color16: #FFFFFF;
}


:root {
  --opacity1: #00000025;
  --opacity2: #00000050;
  --opacity3: #00000075;
  --opacity4: #00000090;
  --opacity5: #00000095;
             
  --opacity6: #F9F9F925;
  --opacity7: #F9F9F950;
  --opacity8: #F9F9F975;
  --opacity9: #F9F9F990;
  --opacity10: #F9F9F995;
}



:root {
--origin3: #ffbdbd;
--origin4: #ff8c8d;
--origin5: #ff5455;
--origin6: #ed3d3e;
--origin7: #d92526;
--origin8: #cd191a;
--origin9: #be1112;
--origin10: #af0c0d;
--origin11: #98090a;
--origin12: #7f0607;
--origin13: #6b0001;
--origin14: #4e0001;
--origin15: #3c0001;
}



:root {
  --origin10-25: #ffdf6125;
  --origin10-50: #ffdf6150;
  --origin10-75: #ffdf6175;
  --origin10-90: #ffdf6190;
  --origin10-95: #ffdf6195;
}


:root {
  --gap-2: .2%;
  --gap-5: .5%;
  --gap1: 1%;
  --gap2: 2%;
  --gap3: 3%;
  --gap4: 4%;
  --gap5: 5%;

  
  
  --item-count2:2;
  --item-count3:3;
  --item-count4:4;
  --item-count5:5;
  --item-count6:6;
  --item-count7:7;
  --item-count8:8;
  
  --body-line-height: 2;
  
  --border-radius: 15px;
}


*,
*::after,
*::before {
  box-sizing: border-box;
  
}



a {
    text-decoration: none;
    transition: .5s ease-out;
}

figure {
    margin: 0;
    padding: 0;
  line-height: 0;
}

h1,h2,h3
{

line-height: 1.3;
}
h1 {
font-size: 2rem;
  line-height: 1.3;
}

h2 {
font-size: 1.3rem;
}

h3 {
font-size: 1.4rem;
}





.wrapper {
  display: flex;
flex-wrap: wrap;
  justify-content: center;
}

.very-small,.tiny {
font-size: .7rem;
}

.small {
font-size: .8rem;
}

.medium {
font-size: .9rem;
}


.btn {
background-color: var(--origin10);
color: var(--color1);
padding: .5% 4%;
}



.projects , .about-company , .services  {
margin-top: var(--gap4);
  padding: 0 8%;
}



.dropdown {
display: flex;
justify-content: center;
align-items: center;
}


.dropdown ul:nth-child(1) {
text-align: left;
}

.between-menu {
width: 600px;
}


.header-fixed{
 position: sticky;
  z-index: 90;
  top: 0;
    min-height: 70px; 
}





.bot-header {
display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gap3);
}


    .pentagon {
   
      
      background: url('/directory/deynirooir/images/logo-back.png');
  width: 269px;
  height: 141px;
  text-align: center;
  margin: auto;
  position: absolute;
  z-index: 101;
 left: 50%;
  transform: translateX(-50%);
  top: -90px;
      
      
    }
   

.services svg  {
display: block;
  margin: auto;
  width: 100px;
  height: 100px;
  transition: .3s ease-out all;
}

.services polygon  {
stroke: var(--origin3);
}

.services code {
  position:relative;
}

.services code img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
}

.services-details img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
}

.services svg:hover {
  transform: rotate(-90deg);
}

.logo-place img {
max-height: 130px;
  padding:10px;
}

.logo-place {
  position:fixed; 
padding: 0 6%;
left: 50%;
transform: translateX(-50%);
  z-index: 110;
  top:0;
}

 .fixed {
 box-shadow: 0px 0px 12px -1px rgba(148,148,148,0.75);
  background-color: var(--color16);
  margin: 0;
border-radius: unset;
  transition: .5s ease-out;
   
  max-height: 70px; 
 
   position: sticky;
  
}
.image-fixed  img {
max-height: 80px;
  transition: .5s ease-out;
  padding-bottom: 6px;
}
 




header {
padding: var(--gap2)
}



.banner-place .banner {
position: relative;
}

.banner-place ul {

}

.banner-place ul li {
  
position: relative;
}

.banner-place ul li .caption , .banner-place ul li figure {
}

.banner-place ul li figure img {

}

.banner-place ul li .caption section {
}


.caption sectio1 {
}
 
.banner-place ul li .caption {
line-height: var(--body-line-height);
  position: absolute;
  z-index: 2;

  text-align: center;

  width: 100%;
  height: 100%;
  background: var(--opacity4);

}



.banner-place ul li .caption h2 {
font-size: 2.5rem;
}


.banner-place ul li .caption h2  {
  color: var(--origin8);
 
}
.banner-place ul li .caption h3
{

 padding-top:100px;
    color: var(--color16);

}

hr {
background-color: var(--origin10);
border: unset;
height: 40px;
width: 4px;
}




.banner-place ul{
direction: rtl;
}

.dots-2 {
  padding: 0;
  text-align: center;
  display: flex;
  justify-content: center;
}

.dots-2 li.active {
  background: var(--origin8);
}


.dots-2 li {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  margin-top: -40px;
  z-index: 2;
}



.caption .btn:nth-child(2) {
margin-right: 10px;
}

.banner-place img {
  object-fit: cover;

max-height: 600px;
 
  height: 600px !important;
}

.banner-place {
display:none;
}




.banner-place figure {
position: relative;
}

.container-aboutus1 {
line-height: var(--body-line-height);
  text-align: justify;
}

.container-aboutus1 h2 {
margin-top: 0;
  text-shadow: -2px 3px 2px rgba(129,129,129,0.6);
}

.about-company {
display: flex;
  align-items: center;
line-height: var(--body-line-height);
}




.about-company section {
padding: var(--gap2);
}

.about-company section p {
text-align: justify;
}



.about-company section figure {
position: relative;
  z-index: 2;
}

.about-company section figure img {
box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.75);
  transition: 0.5s ease-out;
}


.about-company section figure img:hover{
 transform: skew(2deg);
}
.about-company section figure::before {
  content: "";
  transform: rotate(5deg);
  background-color: var(--color11);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -2;
  border: 2px solid var(--color13);
}



.projects section div {
width: calc(100%/var(--item-count4) - var(--gap2));
margin: var(--gap1);
  background-color: var(--color16);
padding: var(--gap2);
  line-height: var(--body-line-height);
    transition: .5s ease-out;
  text-align: center;
  border: 5px solid var(--color13);
}

.master-container-content .projects {
padding: 0;
  margin-top: 100px;
}



.projects section div h3 a , .projects section div h3 a:visited , .projects section div h3 a:link {
color: var(--color4);
}

.projects section div:hover {
transform: translate(0,-15px);
}

.projects h1 {
text-align: center;
}


.projects section div figure img {
height: 210px;
margin-top: -40%;
border-radius: 50%;
width: 210px;
object-fit: cover;
filter: saturate(0%);
  transition: .5s ease-in;
}




.projects section div:hover figure img {
filter: unset;
}

.projects section div figure img:hover {
filter: unset;
}

.projects section div article {
display: flex;
align-items: center;
  justify-content: center;
}

.projects section div article h3 {
margin-right: 10px;
}


.projects section div h4 {
text-align: center;
  color: var(--color5);
  margin-bottom: 0;
  font-weight: normal;
}

.projects-details {
text-align: center;
  display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.master-container-content .projects-details figure img {
width: 300px;
height: 300px;
  border-radius: 50%;
}



.projects-details p {
color: var(--color4);
  text-align: justify;
      width: 100%;
}




.search-page {
display: flex;
  justify-content: center;
}

.search-page section {
text-align: center;
}

.search-page section a , .search-page section a:visited , .search-page section a:link {
color: var(--color4);
}

.dropdown ul li a , .dropdown ul li a:visited , .dropdown ul li a:link {
color: var(--color1);
}



.dropdown li span {
float: left;
  padding-right: 10px;
}



.dropdown span::after {
border-top-color: var(--origin4);
}


.dropdown ul li.hover, .dropdown ul li:hover {
  border-bottom: unset;
}

.dropdown ul li a:hover {
  color: var(--origin10);
}

.dropdown ul li li.hover, .dropdown ul li li:hover {
  background-color: var(--origin3);
}

form[id^="form"] fieldset li input,  form[id^="form"] fieldset li textarea {
  text-align: right;
  resize: none;
  min-height: 70px;
  width: 100%;
  border: none;
    outline: none;
  border: none;   
  border-BOttom: 1px dotted var(--color10);
  font-size: 1.1em;
font-weight: normal;
}

form[id^="form"] {
  margin-bottom: 8%;
}



html:lang(ar) form[id^="form"] fieldset li input,
html:lang(ar) form[id^="form"] fieldset li textarea,
html:lang(fa) form[id^="form"] fieldset li input,
html:lang(fa) form[id^="form"] fieldset li textarea {
  font-family: tanha;
  font-size: unset;
  border: unset;
}



form[id^="form"] fieldset li {
border-bottom: 1px dotted var(--origin10);
  width: calc(100%/var(--item-count2) - var(--gap2));
margin: var(--gap1);
  padding: unset;
  border-radius: unset;
}

form[id^="form"] fieldset, fieldset {
background-color: unset;
  margin: 0;
  border-radius: unset;
  width: unset;
}



form[id^="form"] input[type="button"]:hover, form[id^="form"] button:hover {
  background-color:  var(--color16);
  color: var(--origin10);
  background-image:none;
}



form[id^="form"] input[type="button"],
input[type="reset"], form[id^="form"] button, button, input[type="button"] {
  color: var(--color16);
  background-color: var(--origin10);
 border: 1px solid var(--origin10);
  width:300px;
  margin: var(--gap2) auto;
display: block;
  font-weight: bold;
}

html:lang(fa) button, html:lang(fa) input[type="button"] {
  font-family: tanha;
}



footer {
background-image: url('/directory/deynirooir/pic/refinary.jpg');
    background-position: center;
    margin-top: var(--gap4);
    background-repeat: no-repeat;
    background-size: cover;
      background-color: var(--color3);
    background-blend-mode: soft-light;
}


.top-footer {
display: flex;
justify-content: center;
  padding: var(--gap2) 8%;
}

.top-footer section {
width: calc(100%/var(--item-count3) - var(--gap2));
margin: var(--gap1);
}

.top-footer section:last-child {
text-align: justify;
line-height: var(--body-line-height);
}

.top-footer section:last-child p {
  color: var(--color16);
}


.top-footer section:last-child i {
width: 35px;
height: 35px;
padding-right: 2px;
margin-left: 10px;
margin-top: 15px;
margin-right: unset;
  display: inline-block;
text-align: center;
}

.top-footer section:last-child .icon-telegram {
padding-right: 1px;
padding-top: 1px;
}

.top-footer section:last-child i::before {
font-size: 1.3rem;
    color: var(--color16);
}




.top-footer section h2 {
color: var(--color16);
}

.top-footer .social-place {
margin-right: 0;
}


.top-footer .logo-place img {
margin: 0;
}

.top-footer section ul {
  padding: 0;
  list-style: none;
}

.top-footer section ul li {
padding: 5px 0;
}




.top-footer section ul li a , .top-footer section ul li a:visited, .top-footer section ul li a:link {
color: var(--color16);
}

 .top-footer section:nth-child(2) ul li a::before {
content: '\e801';
  font-family: "webfont";
  margin: .2rem;
font-size: .9rem;
  color: var(--origin10);
  padding-left: 5px;
}

.top-footer [class^="icon-"]::before, .top-footer [class*=" icon-"]::before, input[class^="icon-"]::before {
  font-size: .9rem;
  color: var(--origin10);
  padding-left: 5px;
  width: unset;
}

.top-footer section ul li a:hover {
color: var(--origin10);
  padding-right: 10px;
}

.social-place i {
  border: 2px solid var(--origin10)
}


.social-place i:hover {
background-color: var(--opacity3);
}



.bot-footer {
text-align: center;
  background-color: var(--opacity1);
}

.bot-footer section , .bot-footer {
padding: var(--gap-2) 0;
}

.rules , .karik a , .karik a:visited , .karik a:link  {
color: var(--color12);
}


.up {
    cursor: pointer;
    position: fixed;
    bottom: 33px;
    left: 20px;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    transition: .3s ease-out;
  text-align: center;
      background-color: var(--opacity7);

}

.up i {
    transition: .3s ease-out;
}

.icon-up::before {
    margin-top: 15px;
  color: var(--color16);
}


.master-container {
  margin: 0 8%;
}

.master-container-title h1 {
background-color: var(--color13);
padding: var(--gap1);
  text-align: right;
  padding-right: var(--gap2);
  box-shadow: 0px 0px 5px -1px rgba(54,54,54,0.75);
}



.master-container-content {
line-height: var(--body-line-height);
  text-align: justify;
  padding: 0 1.5%;
  min-height: 400px;
}

.master-container-content img {
border-radius: 20px;
transition: .5s ease-out;
display: block;
margin: var(--gap3) auto;
object-fit: cover;
  max-width: 90%;
}






.master-container-content article {
  margin: var(--gap3) 0;
  display: flex;
}



.work-samples-details section figure {
float: left;
}

.work-samples-details section figure img {
max-width: 100%;
  margin-right: var(--gap5);
}




.master-container .container-aboutus1, .master-container .expertise,
.master-container form[id^="form"], .master-container .work-samples-container,
.master-container .banner-place {
padding: 0;
}


.master-container .expertise section div figure img {
border: unset;
  max-width: unset;
}

.master-container .expertise {
margin-top: 0;
}

.contact_us_container {
display: flex;
}




.master-container-content ul {
   
  margin: 0;
  padding: var(--gap1);

}


.google-section {
flex: 1;
    padding: var(--gap1);
}

iframe {
width: 100%;
}



.master-container-content ul li span:nth-child(1) {
background-color: var(--color4);
padding: var(--gap-5)
}

.master-container-content ul li span:nth-child(1) i {
color: var(--color16);
  text-align: center;
display: block;
}

.master-container-content ul li span:nth-child(2) {
    text-align: right;
  background-color: var(--color15);
    padding: 0 var(--gap1);
padding: var(--gap-5) 1.5%;
  width: 100%;
}


.master-container-content ul a , .master-container-content ul a:visited ,
.master-container-content ul a:link {
color: var(--color1);
}

.services {
background-image: url('/directory/deynirooir/Pic/landing-bg-parallax.jpg');
  padding: var(--gap5) 8%;
text-align: center;
  background-repeat: no-repeat;
    background-size: cover;
}

.master-container-content .services {
background-image: unset;
  padding: 0;
}

.master-container-content .services h2 a , .master-container-content .services h2 a:visited ,
.master-container-content .services h2 a:link {
color: var(--color4);
}


.master-container-content .services code img {
  top: 35%;
}

.master-container-content .services article section {
box-shadow: 0px 0px 5px 0px rgba(123,123,123,0.75);
  padding: var(--gap1);
  background-color: var(--color7);
}

.master-container-content .services polygon {
stroke: var(--color10);
}


.services h2 a , .services h2 a:visited , .services h2 a:link {
color: var(--color16);
}

.services h1 {
color: var(--color16);
  margin-bottom: var(--gap3);
}


.services article {
display: flex;
flex-wrap: wrap;
      justify-content: center;
}

.services article section {
 width: calc(100%/var(--item-count3) - var(--gap2));
margin: var(--gap1);
  display: flex;
flex-direction: column;
      background-color: var(--opacity4);
    padding: var(--gap2);
    border-radius: 10px;
}

.services article section span , .services article section p , .services article section h2 {
color: var(--color16);
}

.services article section p {
margin: 0;
  text-align: justify;
}

.services article section span {
font-weight: bold;
  margin: var(--gap5) 0;
}


  .master-container .services {
  margin-top: unset;
  }


.services-details {
flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}


.services-details section {
display: flex;
}


.services-details code {
position: relative;
}


.services-details svg:hover {
  transform: rotate(-90deg);
}

.services-details i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--origin10);
font-size: 2rem;
}

.services-details svg {
display: block;
margin: auto;
width: 200px;
height: 200px;
transition: .3s ease-out all;
}

.services-details polygon {
 stroke: var(--color10);
}




i {
    cursor: pointer;
}

.menu i {
display: none;
}


form[id^="form"] fieldset, fieldset {
  background-color: var(--color16);
  width: 100%;
  border-radius: var(--border-radius);
}

legend {
  font-weight: bold;
  font-size: 1.6em;
}



form[id^="form"] input:focus, 
form[id^="form"] select:focus, 
form[id^="form"] textarea:focus {
  border: none;
    border-BOttom: 1px solid var(--color10);
}



#form114{

float: left;
width: 100%;

  margin: 4% .3%;
  text-align:center;
}


.menu-place li img {
  max-width: 50px;
    border-radius: 5px;;
}

.dropdown ul li li {
  display: flex;
  align-items: center;
}

.dropdown ul li li a {
padding-right: 10px;
}

.dropdown ul li li {
  width: 250px;
  border-bottom: 1px dotted var(--color11);
}


 ul.contact_us li {
  display: flex;
  margin: var(--gap1) 0;
}

 ul.contact_us  {
list-style-type: none;
}



ul.contact_us li span:nth-child(1) {
  background-color: var(--color4);
  padding: var(--gap1);
}

ul.contact_us li span:nth-child(2) {
  text-align: right;
  background-color: var(--color14);
  width: 100%;
  padding: var(--gap1);
}


/* Under 1400px	*/
@media (max-width: 1400px) {


  .projects, .about-company {
  padding: 0 var(--gap3);
}
  


  
  header {
  margin: 0 var(--gap3);
    margin-top: var(--gap2);
  }
  
  .master-container  {
  margin: 0 ;
  }
  
  .master-container-content {
    margin: 0 var(--gap3);
  }
  
 
}


/* Under 1360px	*/
@media (max-width: 1360px) {






}
  









/* Under 1024px	*/
@media (max-width: 1024px) {
  
    .contact_us_container {
  flex-direction: column;
  }
  
  
  header {
  margin: 0;
    margin-top: 0;
    padding: 1.5%;
  }

  .dropdown {
  flex-direction: column;
  }
  
  .logo-place {
        top: 10px;
        padding: 0;

}
  
  
  
  .logo-place img {
  max-height: 55px;
}
  
  .logo-in-menu img {
  height: 55px;
    margin: 10px;
  }

  
   .top-header {
  background-color: var(--color15);
     padding: var(--gap1) 2.8%;
  }
  


  
  .menu i {
float: right;
margin-bottom: 20px;
    display: block;
color: var(--origin10);
  }
  
     .menu-place {
        position: absolute;
        width: 100%;
        right: -1050px;
        top: 75px;
       display: none;
    }
  
  .dropdown ul {
  width: 100%;
background-color: var(--color15);
  }
  
  .dropdown ul li {
  display: block;
    padding: 10px 15px;
    border-bottom: 1px dotted var(--color10);
  }
  
  .pentagon {
  display: none;
  }

  .about-company {
  flex-wrap: wrap;
justify-content: center;
  }
  
  
  .fixed .logo-place img {
  margin-top: unset;
    max-height: 55px;
}
  

  .dropdown li span {
  float: left;
  }
  
  .dropdown ul li li {
  background-color: var(--color15);
  width: 100%;
}
  .dropdown ul li li.hover, .dropdown ul li li:hover {
  background-color: unset;
}
  
  .dropdown ul li.hover, .dropdown ul li:hover {
  border-bottom: 1px dotted var(--color10);
  }
  
  
  .dropdown ul li a, .dropdown ul li a:visited, .dropdown ul li a:link {
  color: var(--color1);
}
  
  .banner-place ul li .caption {
  padding-left: 0;
    font-size: .9rem;
  }
 
  .banner-place img , .banner-place figure::before {
  height: 350px;
  }
  
  .projects {
  margin-top: 10%;
}
  
  
  .projects section div article {
  flex-direction: column;
  }
  
  
 
  .top-footer {
  padding: var(--gap3);
  }
  
  
  
  .master-container-content img {
  max-width: 100%;
  }
  
  .work-samples-container {
  margin-top: 80px;
  }
  

}


/* Under 820px	*/
@media (max-width: 820px) {
  
  
  :root {
  --item-count2: 1;
  --item-count3: 1;
  --item-count4: 2;
  }
  
  
  .banner-place ul li .caption h3 {
  padding-top: unset;
  }
  
  
  
  
  .master-container-content ul {
  padding: 0;
}
  
  

  
  .dropdown ul li li {
  font-size: unset;
    padding: 10px 15px;
  }
  
  .dropdown ul li ul {
  margin: 0;
    padding: 0;
  }
  
 
  .projects section div article {
  flex-direction: column;
  }
  

  .banner-place ul li {
  flex-direction: column-reverse;
  }
  
  .banner-place ul li .caption, .banner-place ul li figure {
  flex: unset;
}
  
  
  .banner-place ul li .caption {
    padding: var(--gap2);
  }
  
  .banner-place ul li .caption h2 {
  font-size: unset;
}
  
  
   .projects section div article {
  flex-direction: unset;
  }
  
  .about-company {
  flex-wrap: wrap;
  }
  

  
  .projects section div:nth-child(3) , .projects section div:nth-child(4) {
  margin-top: 15%;
  }
  
  
  
  .projects section:nth-child(2) div figure img {
  height: 100px;
}
  
  
  .top-footer section {
  align-items: unset;
  }
  
  
  .master-container-content ul li span:nth-child(2) {
  width: 100%;
    padding: 8px;
  }
  
 
  

  }
  



/* Under 620px	*/
@media (max-width: 620px) {

 footer {
  margin-top: 10%;
}
  
  .banner-place figure {
  text-align: center;
}
  
  .banner-place figure::before {
 
  }
 
  .master-container-content ul {
  padding: 0;
  }
  
  
  .work-samples-details section figure {
  float: unset;
  }
  
  
  .work-samples-details section figure img {
  margin: var(--gap3) auto;
  }



  
  
}





/* Under 520px	*/
@media (max-width: 520px) {
  
    *{
   user-select: none; 
  }
  
  
  :root {
  --item-count4: 1;
}
  
  header {
  padding: var(--gap3);
  }
  
  .menu-place {
  top: 71px;
  }

  
  .logo-place {
    top: 0;
  }
  
  .master-container-content .projects-details figure img {
  max-width: 100%;
  }
  
  
  .about-company section figure img {
  max-width: 100%;
}
  

  
  .master-container-content ul {
  margin: 0;
  }
  
  .projects section div:nth-child(1) {
  margin-top: 20%;
}

.projects section div:nth-child(3), .projects section div:nth-child(4) {
  margin-top: 35%;
}
  
 
  
  .banner-place img, .banner-place figure::before {
  height: 300px;
}
  


  .social-place {
  display: none;
  }

  .projects section:nth-child(1) h2 {
  text-align: justify;
  }
  


  .master-container-content {
  margin: 0 var(--gap5);
}
  
  .master-container-title h1 {
  font-weight: normal;
    font-size: 1.5rem;
  }
  
  
  
  
  .projects section div {
  margin-top: 35%;
  }
  
  
  

}


/* Under 414px	*/
@media (max-width: 414px) {
  

  .banner-place figure {
  text-align: right;
}
  
  .banner-place img {
  width: 100%;
  }
  
  .menu-place {
  top: 67px;
}
  

  
  
  .container-aboutus2 .containers-pic img {
  height: 230px;
}
  
  .gallery-container article section {
  width: calc(100%/1 - var(--gap2));
  }
  

  
  
}

/* Under 360px	*/
@media (max-width: 360px) {
  
  
}