.info-block {
  &__frame {
    background: rgba(0, 0, 0, 0.5);
    border-radius: $border-radius;
    color: $color-brand--white;
    padding: 10px 20px;
  }

  &__title {
    @include font-style('title--s');
    font-size: 26px;
    margin-bottom: unset;
    padding: 10px 0 5px;

    + .info-block__description {
      padding-bottom: 10px;
    }
   }

   &__description {
     @include font-style('body--l');
     margin-bottom: unset;
   }
}

.info-block--small-screen {
  background-size: cover;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  min-height: $baseline * 23;
  object-fit: cover;
  padding: 40% 20px 30px;

  @include viewport--l {
    display: none;
  }
}

.info-block--large-screen {
    align-self: end;
    grid-row-start: 1;
    margin-bottom: 30px;
    margin-top: 20px;
    overflow: hidden;

    @include viewport--l('inversed') {
      display: none;
    }
}