/* stylelint-disable max-line-length */
/* stylelint-disable max-line-length */
.block-grid {
  margin-bottom: 20px;
  margin-top: 15px;
}
@media (min-width: 64rem) {
  .block-grid {
    margin-bottom: 200px;
  }
}
.block-grid__arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 0;
  position: absolute;
  top: 22px;
  right: 0;
  transform: translateX(-50%);
  background: var(--color-pink);
  z-index: 3;
  cursor: pointer;
  transition: var(--sk-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
@media (min-width: 64rem) {
  .block-grid__arrow:hover {
    background: var(--color-turquiose);
  }
  .block-grid__arrow:hover .span {
    background-color: var(--color-blue);
  }
}
.block-grid__arrow span {
  display: flex;
  width: 15px;
  height: 19px;
  background-color: var(--color-white);
  transition: var(--sk-transition);
  -webkit-mask: url("../../../resources/img/arrow.svg") no-repeat center;
          mask: url("../../../resources/img/arrow.svg") no-repeat center;
  transform: rotate(90deg);
}
.block-grid .block-grid__link:hover ~ .block-grid__item-text {
  background-color: var(--color-blue);
}
.block-grid__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}
.block-grid__link:hover .block-grid__arrow {
  opacity: 1;
}
.block-grid__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.block-grid__item {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 390px;
  aspect-ratio: 2/1.54;
  border-radius: 25px;
  overflow: hidden;
}
.block-grid__item img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.block-grid__item-text {
  background-color: var(--color-blue-75);
  padding: 16px 23px;
  z-index: 2;
  margin-top: auto;
  transition: var(--sk-transition);
}
.block-grid__item-text span {
  color: var(--color-white);
}