.cards-square-highlight {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: 'Pluto Sans';
}

.cards-square__card {
  flex: 1;
  overflow:hidden;
  width: 100%;
  height: 390px;
  aspect-ratio: 360/395;

}

.cards-square__card:hover .cards-square__text,
.cards-square__card:active .cards-square__text{
  display: flex;
  justify-content: center;
  align-items: center;
}

.cards-square__text {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1.5rem 1rem;
  transition: all 0.33s ease-out;
}

.cards-square__text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  mix-blend-mode: multiply;
}

.cards-square__card:nth-child(1):hover .cards-square__text::before {
  mix-blend-mode: normal;
    background-color: rgba(238, 39, 55, 0.85);
}
.cards-square__card:nth-child(2):hover .cards-square__text::before {
  mix-blend-mode: normal;
    background-color: rgba(12, 35, 64, 0.85);
}
.cards-square__card:nth-child(3):hover .cards-square__text::before {
  mix-blend-mode: normal;
    background-color: rgba(255, 158, 27, 0.85);
}

.cards-square__card:hover .cards-square__text-inner,
.cards-square__card:active .cards-square__text-inner{
  opacity: 0;
}

.cards-square__card:hover .cards-square__text-inner--hover,
.cards-square__card:active .cards-square__text-inner--hover{
  opacity: 1;
}

.cards-square__text-inner {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  color: #fff; 
  font-weight: bold;
  z-index: 2;
  text-align: center;
  transition: all 0.3s;
  visibility: visible;
  font-family: 'Montserrat';
}

.cards-square__text-inner--hover {
  position: absolute;
  z-index: 2;
  color: #fff; 
  font-size: clamp(18px, 16px + 0.3947vw, 24px);
  opacity: 0;
  transition: all 0.3s;
  padding: 1.5rem;
}

@media screen and (min-width:600px) {
  .cards-square__text-inner {
    top: 3.75%;
  }
  .cards-square__card {
    width: 33%
    flex-grow: 1;
    height: 703px;
    text-align:center;
    aspect-ratio: 640/703;
  }
  .cards-square-highlight {
    flex-direction: row;
  }
}

@media screen and (min-width:1600px) {
  .cards-square__text-inner--hover {
    padding: 3rem;
  }
}