/**********COMMON ELEMENTS***********/
/*Square structure*/
.square-container {
  background-color: var(--white);
}
.square-wr {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}
.square {
  width: 13vw;
  height: 13vw;
  background-color: red;
  padding: 0px 10px;
  font-size: 22px;
  line-height: 1.3;
}
.square-text {
  display: none;
  position: relative;
  top: -4px;
}
.square-text p {
  margin-bottom: 32px;
}
.square-text.active {
  display: inline-block;
}
#blue-square {
  background-color: var(--blue);
}
#pink-square {
  background-color: var(--pink);
}
#white-square {
  background-color: var(--white);
}
#yellow-square {
  background-color: var(--yellow);
}
#green-square {
  background-color: var(--green);
}
#orange-square {
  background-color: var(--orange);
}
#white-square .square-text {
  display: block;
}

/*RESPONSIVE*/
/*xl & <*/
@media only screen and (max-width: 1400px) {
  .square {
    font-size: 19px;
    line-height: 1.2;
    width: 14vw;
    height: 14vw;
  }
}
/*lg & <*/
@media only screen and (max-width: 1200px) {
  .square {
    font-size: 18px;
    line-height: 1.4;
    width: 14.5vw;
    height: 14.5vw;
  }
}
/*md & <*/
@media only screen and (max-width: 992px) {
  .square {
    font-size: 17px;
    line-height: 1.2;
    width: 15vw;
    height: 15vw;
    padding: 0px 6px;
  }
}
/*sm & <*/
@media only screen and (max-width: 768px) {
  .square {
    font-size: 16px;
    line-height: 1.2;
    width: 16.1vw;
    height: 16.1vw;
    padding: 0px 6px;
  }
}
/*xs*/
@media only screen and (max-width: 576px) {
}