@charset "utf-8";
  /**/
/* CSS Document */

.main {
  background-color: #F9F9F9;
}
.section-top {
  padding-top: 50px ;
  text-align: center;
}
.section-top img {
  width: 100%;
}
.section-top__title {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.section-top h2 {
  width: 100%;
  text-align: right;
  position: absolute;
  top: 150px;
  right: 50px;
}
@media (min-width:680px) {
  .section-top h2 {
    top: 300px;
  right: 20%;
}
}
  @media (min-width:1400px) {
    .section-top h2 {
    right: 30%;
    }
  }
.section-gallery {
  margin: 0 24px;
}
.section-gallery p {
  margin: 50px 24px;
  font-size: 1.6rem;
}
.container {
  width: 100%;
  justify-content: center;
  display: grid; 
  grid-template-columns: 150px 150px; 
  grid-template-rows: 150px 150px 150px 150px 150px 150px 150px 150px 150px 150px; 
  gap: 10px; 
  grid-template-areas: 
    "areaA areaA"
    "areaB areaC"
    "areaD areaE"
    "areaF areaF"
    "areaF areaF"
    "areaG areaH"
    "areaI areaI"
    "areaJ areaK"
    "areaL areaM"
    "areaN areaO"; 
}
.areaA { 
  grid-area: areaA;
}
.areaA img {
  width: 100%;
}
.areaB { 
  grid-area: areaB;
}
.areaB img {
  width: 100%;
}
.areaC { 
  grid-area: areaC;
}
.areaC img {
  width: 100%;
}
.areaF { 
  grid-area: areaF;
}
.areaF img {
  height: 100%;
}
.areaD { 
  grid-area: areaD;
}
.areaD img {
  width: 100%;
}
.areaE { 
  grid-area: areaE;
}
.areaE img {
  width: 100%;
}
.areaG { 
  grid-area: areaG;
}
.areaG img {
  width: 100%;
}
.areaH { 
  grid-area: areaH;
}
.areaH img {
  width: 100%;
}
.areaI { 
  grid-area: areaI;
}
.areaI img {
  width: 100%;
}
.areaJ { 
  grid-area: areaJ;
}
.areaJ img {
  width: 100%;
}
.areaK { 
  grid-area: areaK;
}
.areaK img {
  width: 100%;
}
.areaL { 
  grid-area: areaL;
}
.areaL img {
  width: 100%;
}
.areaM { 
  grid-area: areaM;
}
.areaM img {
  width: 100%;
}
.areaN { 
  grid-area: areaN;
}
.areaN img {
  width: 100%;
}
@media (min-width:650px) {
  .container {
  grid-template-columns: 150px 150px 150px 150px; 
  grid-template-rows: 150px 150px 150px 150px 150px;
    grid-template-areas: 
    "areaA areaA areaB areaC"
    "areaD areaE areaF areaF"
    "areaG areaH areaF areaF"
    "areaI areaI areaJ areaK"
    "areaL areaM areaN areaO"; 
  }
}
@media (min-width:1100px) {
  .section-gallery p {
    width: 1000px;
    text-align: left;
    margin: 50px auto;
  }
.container {
  margin: 0 auto;
  gap: 20px; 
  grid-template-columns: 240px 240px 240px 240px; 
  grid-template-rows: 240px 240px 240px 240px 240px; 
  width: 1000px; 
  height: 1300px; 
}
  .areaA {
  overflow: hidden;
}
}
.btn-close-modal {
  width: 100%;
  text-align: center;
  margin: 20px auto;
}
.btn-close-modal img {
  width: 80px;
}
.modal-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.modal-content p {
  width: 300px;
  padding-left: 50px;
  color: #F2F4F6;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 3.0rem;
}
.modal-content p span{
  font-size: 2.0rem;
  font-weight: 600;
}
.modal-content img {
  width: 100vw;
  max-width: 800px;
}
@media (min-width:1100px) {
  .modal-content {
    flex-wrap: nowrap;
    align-items: center;
  }
  .modal-content img {
  width: 50vw;
  max-width: 600px;
}
}