HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
File: D:/HostingSpaces/slenders/slenders.nl/resources/sass/site/5-Components/_components.mmhCard.scss
$mmhCtaBp: 575;

.c-mmh-cta {
  position: relative;
  text-decoration: none;

  @include mq($mmhCtaBp) {
    max-width: 600px;
    padding-left: 240px;
  }
}

.c-mmh-cta__image {
  display: block;
  background-color: palette(neutral, 100);

  img {
    width: 100%;
  }

  @include mq($mmhCtaBp) {
    position: absolute;
    left: 0;
    top: 0;
    width: 240px;
    height: calc(100% - 85px);

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }
}

.c-mmh-cta__main {
  padding: 45px 40px 35px;
  background-color: palette(secondary, 100);
  transition: background-color 0.3s;
}

.c-mmh-cta__scroll-down {}

.c-mmh-cta__heading,
.c-mmh-cta__title {
  color: palette(primary, 700);
  margin-bottom: 15px;
}

.c-mmh-cta__heading {
  @include font(mid, 26, extra-bold);
  text-transform: uppercase;
}

.c-mmh-cta__title {
  @include font(mid, 26);
}

.c-mmh-cta__price {
  @include font(mid, 26, semi-bold);
  color: palette(primary, 700);
}

.c-mmh-cta:hover {
  .c-scroll-down__arrow {
    transform: translateY(6px);
  }

  .c-mmh-cta__main {
    background-color: mix(palette(primary), palette(secondary, 100), 15%);
  }
}

.c-mmh-cta__scroll-down-text {
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  justify-content: flex-start !important;
  padding: 0 40px;
}