.square-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  justify-content: center;
}

.square-parent{
  width:clamp(0px, 100vw / 4, 500px);

  overflow: hidden;

  display: flex;
  flex-direction: column;

  margin-left:10px;
  margin-right: 10px;
}

.square-image-container{
  width:100%;
  height:clamp(0px, 100vw / 8, 600px);
}

.square-description{
  margin-bottom: 40px;

  text-align: justify;
}

img.square-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h3.square-title{
   text-transform: uppercase;
    letter-spacing: 8px;
    font-weight: 500;
    font-size: 20px;

    margin-top: 20px;
    margin-bottom: 20px;

    text-align: center;
}

@media only screen and (min-width: 900px) and (max-width: 1279px){

.square-parent{
  width:calc((100vw / 3) - 30px);
}

.square-image-container{
  height:calc((100vw / 6) - 30px);
}

}

@media only screen and (min-width: 0px) and (max-width: 900px){

.square-parent{
  width:calc(100vw - 30px);
}

.square-image-container{
  height:calc(50vw - 30px);
}

.square-description{
  margin-bottom: 40px;
}

}