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

main{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100vw;
    max-width: 100vw;
}

.head {
    text-align: center;
    overflow: hidden;
    font-family: var(--heading-font);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

 .head h1 {
    width: 100vw;
    text-align: center;
  }

.head .front {
    position: absolute;
    text-align: center;
    font-size: 3rem;
    z-index: 13;
    background-color: transparent;
    color: var(--primary-color);
  }

  .head .back {
    position: relative;
    text-align: center;
    font-weight: 500;
    font-size: 6rem;
    color: var(--back-color);
  }


  .body{
    display: grid;
    place-items: center;
    margin: 3rem;
  }


  .container {
    width: 100% ;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
    gap: 20px;
  }

  .item {
    background-color: #eee;
    padding: 20px;
    text-align: center;
    width: 100%;
    height:30vw;
  }
  
  .image-grid {
             padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
    gap: 20px;
}

.image img {
    width: 100%;
    height: auto;
}





  /* ============================================================================= */
/* Galaxy Fold and Folding Phones */
/* ============================================================================= */
@media (min-width: 120px) and (max-width: 360px){

    .head  .front{
        font-size: 1.9rem !important;
    }

    .head .back{
        font-size: 4rem !important;
    }
    
    .image-grid {
        padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50vw, 1fr));
    gap: 20px;
}

.image img {
    width: 100%;
    height: auto;
}

}

/* ============================================================================= */
/* Small Screen Phones */
/* ============================================================================= */
@media (min-width: 360px) and (max-width: 577px){

    .head  .front{
        font-size: 2.5rem !important;
    }

    .head .back{
        font-size: 6rem !important;
    }
    
        
    .image-grid {
        padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50vw, 1fr));
    gap: 20px;
}

.image img {
    width: 100%;
    height: auto;
}
}

/* ============================================================================= */
/* HD Screen Phones */
/* ============================================================================= */
@media (min-width: 577px) and (max-width: 769px){

    .head  .front{
        font-size: 2.5rem !important;
    }

    .head .back{
        font-size: 6rem !important;
    }
}

/* ============================================================================= */
/* Tablets and Mini Laptops */
/* ============================================================================= */
@media (min-width: 769px) and (max-width: 992px) {

    .head  .front{
        font-size: 2.5rem !important;
    }

    .head .back{
        font-size: 6rem !important;
    }
}

/* ============================================================================= */
/* Laptops And Desktops */
/* ============================================================================= */

@media (min-width: 993px) and (max-width: 1920px){

    .head  .front{
        font-size: 2.5rem !important;
    }

    .head .back{
        font-size: 5.5rem !important;
    }
}

/* ============================================================================= */
/* 4K Screens */
/* ============================================================================= */
@media (min-width: 1920px){
    
    .head  .front{
        font-size: 3rem !important;
    }

    .head .back{
        font-size: 7rem !important;
    }
}