.locationContentSection {

  width: 100%;

  padding-block: 50px;

  padding-left: 50px;

  background-color: #f4efe7;

}



.locationContentSection .locationInfo {

  display: flex;

  align-items: center;

}



.locationContentSection .locationInfo img {

  width: 50%;

  min-height: 650px;

  object-fit: cover;

}



.locationContentSection .locationInfo .info {

  width: 50%;

  display: flex;

  flex-direction: column;

  gap: 8px;

  align-items: center;

  justify-content: center;

  padding-left: 40px;

}



.locationContentSection .locationInfo .info .infoTitle {

  font-family: var(--font-formaDJR);

  letter-spacing: var(--ls-formaDJR);

  font-weight: 500;

  font-size: 26px;

  line-height: 36px;

  

  color: #142927;

  margin: 0;

  width: 100%;

  text-align: left;

  max-width: 333px;

}



.locationContentSection .locationInfo .info .desc {

  font-family: var(--font-mont);

  letter-spacing: var(--ls-mont);

  

  font-weight: 300;

  font-style: Light;

  font-size: 16px;

  line-height: 26px;

  max-width: 333px;

  text-align: left;

  color: #142927;

}



@media (max-width: 768px) {

  .locationContentSection .locationInfo {

    flex-direction: column;

  }



  .locationContentSection .locationInfo img,

  .locationContentSection .locationInfo .info {

    width: 100%;

  }



  .locationContentSection .locationInfo img {

    min-height: 350px;

  }



  .locationContentSection .locationInfo .info {

    padding-left: 0;

    padding-top: 20px;

  }
  
.locationContentSection .locationInfo .info .infoTitle {
  max-width: 100%;
}
  .locationContentSection .locationInfo .info .desc {
    max-width: 100%;
  }
}



.artSection {

  padding-block: 50px;

  background-color: #f9f6ed;

  padding-inline: 50px;

}



.artSection .artSectionBox {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  align-items: center;

}


.artSection .images {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

}

.artSection .images .rightCol,
.artSection .images .leftCol {
  display: flex;
  flex-direction: column;
  gap: 20px;

}

.artSection .images .leftCol {
  margin-top: 40px !important;
}

.artSection .images img {

  width: 100%;

  height: auto;

  object-fit: cover;

}

@media (max-width: 900px) {

  .artSection .artSectionBox {

    grid-template-columns: 1fr;

  }

}



.artSection .rightBox {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}



.artSection .cardBoxInfo {

  max-width: 333px;

  display: flex;

  flex-direction: column;

}



.artSection .cardBoxInfo .infoTitle {

  font-family: var(--font-formaDJR);

  letter-spacing: var(--ls-formaDJR);

  font-weight: 500;

  font-size: 26px;

  line-height: 36px;
  
  color: #142927;

  text-align: start;

  width: 100%;

  max-width: 333px;

}


.artSection .cardBoxInfo .desc {

  width: 100%;

  max-width: 333px;

  padding-top: 10px;

  font-family: var(--font-mont);

  letter-spacing: var(--ls-mont);

  font-weight: 300;

  font-style: Light;

  font-size: 16px;

  line-height: 26px;

  margin-bottom: 25px !important;

  color: #142927;

}

@media (max-width: 767.9px) {

  .locationContentSection {

    padding-inline: 0px;

  }



  .locationContentSection .locationInfo .info {

    margin-left: 15px !important;

    gap: 25px;

    padding-top: 30px;

  }

  .locationContentSection {

    padding-bottom: 70px;

  }

  .artSection {

    padding-inline: 15px;

  }

}