.GridItem > .MaterialCard {
  height: 100%;
}

.MaterialCard {
  position: relative;
  border-radius: 16px;
  padding: var(--card-space-vertical) var(--card-space-horizontal);
  overflow: hidden;
}

.MaterialCard_inverted {
    color: #fff;
  }

.MaterialCard:hover:before {
      opacity: 1;
    }

.MaterialCard:hover .MaterialCard-Button {
      margin-left: 4px;
    }

.MaterialCard:hover:not(.MaterialCard_inverted) {
      color: var(--color-blue-primary);
    }

.MaterialCard:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: 1;
    opacity: 0;
    -webkit-transition: 0.3s all;
    transition: 0.3s all;
  }

.MaterialCard_size_l {
      --card-space-vertical: var(--space-2xl);
      --card-space-horizontal: var(--space-2xl);
      --card-button-space-vertical: var(--space-xl);
      --card-button-space-horizontal: var(--space-2xl);
    }

@media screen and (min-width: 768px) and (max-width: 1199px) {

.MaterialCard_size_l {
        --card-space-vertical: var(--space-4xl)
    }
      }

@media screen and (max-width: 767px) {

.MaterialCard_size_l {
        --card-space-vertical: var(--space-2xl);
        --card-space-horizontal: var(--space-xl);
        --card-button-space-vertical: var(--space-m);
        --card-button-space-horizontal: var(--space-xl)
    }
      }

.MaterialCard_size_l .MaterialCard-Inner {
        height: 100%;
      }

.MaterialCard_size_l .MaterialCard-SubTitle {
        margin-top: var(--space-xl);
      }

@media screen and (max-width: 767px) {

.MaterialCard_size_l .MaterialCard-SubTitle {
          margin-top: var(--space-m)
      }
        }

.MaterialCard_size_l .MaterialCard-Decor {
        max-width: 160px;
        margin-right: var(--space-m);
        position: relative;
        margin-left: auto;
        bottom: calc(var(--space-5xl) * -1 - var(--card-space-vertical));
      }

@media screen and (min-width: 768px) and (max-width: 1199px) {

.MaterialCard_size_l .MaterialCard-Decor {
          bottom: calc(var(--space-4xl) * -1);
          margin-top: var(--space-7xl)
      }
        }

@media screen and (max-width: 767px) {

.MaterialCard_size_l .MaterialCard-Decor {
          max-width: 108px;
          margin-right: var(--space-xs);
          bottom: calc(var(--space-2xl) * -1);
          margin-top: calc(var(--space-s) * -1)
      }
        }

.MaterialCard_size_m {
      --card-space-vertical: var(--space-xl);
      --card-space-horizontal: var(--space-xl);
      --card-button-space-vertical: var(--space-m);
      --card-button-space-horizontal: var(--space-xl);

      min-height: 216px;
    }

@media screen and (max-width: 767px) {

.MaterialCard_size_m {
        min-height: 184px
    }
      }

.MaterialCard_size_m .MaterialCard-Decor {
        max-width: 88px;
      }

.MaterialCard-Link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
  }

.MaterialCard-Title {
    -webkit-transition: 0.3s all;
    transition: 0.3s all;
  }

.MaterialCard-Decor {
    position: absolute;
    bottom: 0;
    right: 0;
  }

.MaterialCard-Button {
    position: absolute;
    bottom: var(--card-button-space-vertical);
    left: var(--card-button-space-horizontal);
    -webkit-transition: 0.3s all;
    transition: 0.3s all;
  }
