.link-boxes {
  height: 240px;
  min-height: 250px;
  max-height: 250px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  font-weight: bold;
  align-items: stretch;
  font-family: "Montserrat";
  -ms-flex-pack: center;
  -ms-flex-align: stretch;
  justify-content: center;
  -webkit-box-pack: center;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -webkit-justify-content: center;
}

.box1, .box2, .box3 {
  -ms-flex-preferred-size: 33.33%;
  -webkit-flex-basis: 33.33%;
  flex-basis: 33.33%;
  -webkit-transition: 0.5s flex-basis cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: 0.5s flex-basis cubic-bezier(0.23, 1, 0.32, 1);
  transition: 0.5s flex-basis cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover
}

.box1:hover, .box2:hover, .box3:hover {
  flex-basis: 48%;
  -webkit-flex-basis: 48%;
  -ms-flex-preferred-size: 48%;
}

.box1:after, .box2:after, .box3:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  -ms-flex-pack: center;
  align-content: center;
  font-size: 1.9rem;
  text-align: center;
  transition: 0.5s background-color cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: 0.5s background-color cubic-bezier(0.23, 1, 0.32, 1);
  flex-direction: column;
  justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-line-pack: center;
  -ms-flex-direction: column;
  -webkit-transition: 0.5s background-color cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-align-content: center;
  -webkit-flex-direction: column;
  -webkit-justify-content: center;
}

.box1:after { background-color: rgba(250, 117, 55, 0.3); content: ""; }
.box2:after { background-color: rgba(186, 231, 75, 0.2); content: ""; }
.box3:after { background-color: rgba(79, 183, 178, 0.3); content: ""; }

.box-1:after { background-color: rgba(225, 240, 130, 0.3)!important; content: ""; }
.box-2:after { background-color: rgba(233, 236, 239, 0.2)!important; content: ""; }
.box-3:after { background-color: rgba(79, 183, 178, 0.3)!important; content: ""; }

.box1:hover:after, .box2:hover:after, .box3:hover:after { opacity: 1!important; }
.box1:hover:after, .box2:hover:after, .box3:hover:after { background: none!important; }


/* --- --- --- gallery --- --- --- */
.gallery {
  --g: 6px;  
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  gap: var(--g);
  grid: auto-flow 1fr/repeat(3,1fr);
}
.gallery img {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: .5s;
  object-fit: cover;
}
.gallery img:hover { filter: grayscale(0); }
.gallery img:nth-child(2) {
  grid-area: 1/2/span 2/span 2;
  clip-path: polygon(0 0,100% 0,100% 100%,calc(50% + var(--g)/4) 100%,0 calc(50% - var(--g)/4))
}
.gallery img:nth-child(3) {
  grid-area: 2/1/span 2/span 2;
  clip-path: polygon(0 0,calc(50% - var(--g)/4) 0,100% calc(50% + var(--g)/4),100% 100%,0 100%);
}

/* --- --- --- gallery --- --- --- */

.container-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10vmin;
  overflow: hidden;
  transform: skew(5deg);

  .card {
    flex: 1;
    transition: all 1s ease-in-out;
    height: 31vmin;
    position: relative;
    .card__head {
      color: black;
      background: rgba(60, 92, 158, 0.75);
      padding: 0.5em;
      transform: rotate(-90deg);
      transform-origin: 0% 0%;
      transition: all 0.5s ease-in-out;
      min-width: 100%;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 1em;
      white-space: nowrap;
    }

    &:hover {
      flex-grow: 10;
      img { filter: grayscale(0); }
      .card__head {
        text-align: center;
        top: calc(100% - 2em);
        color: white;
        background: rgba(0, 0, 0, 0.5);
        font-size: 1.7em;
        transform: rotate(0deg) skew(-5deg);
      }
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 1s ease-in-out;
      /* filter: grayscale(100%); */
    }
    &:not(:nth-child(5)) {
      margin-right: 1em;
    }
  }
}