@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

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

html, body{
    /* scroll-behavior: smooth !important; */
    background-color: #e0d8a8 !important;
    font-family: "Aparajita" !important;
}

h1, h2, h3, h4, h5{
  font-family: 'Playfair Display', serif !important;
}

.scal{
  transition: 0.3s;
}

.scal:hover{
  scale: 1.05;
  border-radius: 5px;
}

.navbar{
  padding:0 !important;
}

.gridflex{
    display: flex;
}

.capi{
  text-transform: uppercase;
  font-size: large;
  letter-spacing: 0.105em;
}

.justify{
  text-align: justify;
}




.containir {
    max-width: 600px;
    width: 100%;
    margin: 30 auto;
    display: grid;
    grid-template-columns: repeat(2, 290px);
    grid-template-rows: repeat(2, 250px);
    gap: 20px;
    position: relative;
  
    div {
      flex: 0 0 50%;
      position: relative;
  
      &:nth-of-type(1) {
        background: url("../pic/download\ \(1\).jpg")
          no-repeat 50% 50% / cover;
  
        &:after {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          content: "";
          background: transparent;
          transform: scale(0.9);
          outline: 5px solid white;
        }
      }
      &:nth-of-type(2) {
        background: url("https://images.pexels.com/photos/1070850/pexels-photo-1070850.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940")
          no-repeat 50% 50% / cover;
  
        &:after {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          content: "";
          background: transparent;
          transform: scale(0.9);
          outline: 5px solid white;
        }
      }
      &:nth-of-type(3) {
        background: url("https://images.pexels.com/photos/132694/pexels-photo-132694.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940")
          no-repeat 50% 50% / cover;
  
        &:after {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          content: "";
          background: transparent;
          transform: scale(0.9);
          outline: 5px solid white;
        }
      }
      &:nth-of-type(4) {
        background: url("https://images.pexels.com/photos/357737/pexels-photo-357737.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940")
          no-repeat 50% 50% / cover;
  
        &:after {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          content: "";
          background: transparent;
          transform: scale(0.9);
          outline: 5px solid white;
        }
      }
    }
  
    .svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  
      .path-one {
        fill: #ffffffe3;
      }
    }
    .span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #ccbc9d;
      text-transform: uppercase;
      font-weight: 500;
      font-size: 1.5rem;
      display: flex;
      flex-wrap: wrap;
      max-width: 180px;
      justify-content: center;
      text-align: center;
      padding: 20px;
    }
  }

  @media screen and (max-width: 1051px){
    .containir{
        grid-template-columns: repeat(2, 220px);
        grid-template-rows: repeat(2, 230px);
        justify-content: center;

        .svg{
            top: 48%;
        }
        .span{
            top: 48%;
        }
    }
}

@media screen and (max-width: 1001px){
  .gridflex{
    display: block;
  }
}

@media only screen and (max-width: 498px) {
    .containir{
        grid-template-columns: repeat(2, 170px);
        grid-template-rows: repeat(2, 170px);
        justify-content: center;

        .svg {
            position: absolute;
            top: 37%;
            left: 50%;
            transform: translate(-50%, -50%);
        
            .path-one {
              fill: #ffffffe3;
            }
          }
          
          .span{
            top: 36%;
            left: 50%;
          }
    }
    .scal:hover{
      scale: 1;
      border-radius: 5px;
    }
}

@media only screen and (max-width: 358px) {
    .containir{
        grid-template-columns: repeat(2, 140px);
        grid-template-rows: repeat(2, 150px);
        .svg {
            position: absolute;
            top: 32%;
            left: 50%;
            width: 160px;
          }
          
          .span{
            top: 32%;
            left: 50%;
            font-size: 1.2rem;
          }
    }
}