/* ECOSYSTEM SECTION */

.section-eco--hero {
  background-color: var(--color-background-complementary);
  color: var(--color-light-grey--2);
}

.section-eco--hero-content {
  padding-top:calc(var(--padding-medium) + 3rem);
}

.section-eco--hero p:not(:last-child) {
  margin-bottom: calc(var(--margin-small) + 0.5rem);
}

.section-eco--heading {
  line-height: calc(var(--lheight-heading--2) + 0.3);
  margin-top: var(--margin-negative);
}

.hero-image--eco {
  background-image: url("../../images/partner/ecosystem/collaboration.23b716d76827.jpg");
}

.section-image--eco {
  background-image: url("../../images/partner/ecosystem/kamuno-kmu-kredit-technologie.4b31dd64e67b.png");
  height: 50%;
  width: auto;
  align-self: baseline;
  margin-top: 10rem;
}

.section-eco--loan div:nth-child(2):not(.titlebox, .textbox) {
  padding: var(--padding-medium);
  row-gap: calc(var(--gap-small) * 2);
}


/* NEWS SECTION */
.section-eco--news {
 margin-top: var(--margin-normal);
}

.card-news--image-1 {
  background-image: url("../../images/blog/kamuno-sme-loan-with-flexible-credit-line-preview.f8b2c7f30cfa.jpg");
}

.card-news--image-2 {
  background-image: url("../../images/blog/kamuno-team-competent-service-for-sme-preview.79b1a2b437c8.jpg");
}

.card-news--image-3 {
  background-image: url("../../images/blog/kamuno-tochtergessellschaft-der-urner-kantonalbank-preview.04ae957caf28.jpg");
}

/* Responsive design */
@media only screen and (max-width: 84.375em) {
  .section-eco--hero-content {
    grid-template-columns: 1fr;
    padding-left: var(--padding-medium);
    padding-right: var(--padding-medium);
 }

  .section-eco--market {
    padding-bottom: 6.4rem;
    row-gap: 8rem;
 }

  .section-eco--loan {
    column-gap: 3rem;
 }

  .section-eco--loan div:nth-child(2):not(.titlebox, .textbox) {
    padding-right: 0;
 }

  .card-news--image {
    height: 36rem;
 }
}

@media only screen and (max-width: 70em) {
  .section-eco--market {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    row-gap: 0;
 }

  .video {
    grid-row: 1;
 }

 .section-eco--loan {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 0;
    padding: 0;
 }

  .section-eco--market div {
    display: block;
    padding: 0 5rem;
 }

 .section-eco--market .contentbox {
   align-self: baseline;
   margin-top: 9.6rem;
 }

  .section-eco--loan {
    padding-bottom: 6.4rem;
 }

  .section-eco--loan div:nth-child(2):not(.titlebox, .textbox) {
    padding: var(--padding-medium) 10rem;
 }

 .section-image--eco {
   height: 80%;
   margin-top: 0;
   align-self: end;
 }

  .section-eco--news {
    padding-top: var(--padding-section-small);
 }

  .section-news--cards {
    grid-gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
 }

  .card-news--image {
    height: 26rem;
 }
}

@media only screen and (max-width: 56.25em) {
  .section-eco--hero-content {
    padding-left: 0;
    padding-right: 0;
 }

  .section-eco--market div {
    padding: 0 2.5rem;
 }

  .section-eco--loan {
    row-gap: 0;
 }

  .section-eco--loan div:nth-child(2):not(.titlebox, .textbox) {
    padding: 0 4rem 5rem 4rem;
 }

 .section-image--eco {
   height: 63%;
   align-self: center;
 }

  .section-eco--news {
    padding: 0;
 }

  .heading-secondary {
    font-size: 4.2rem;
  }

  .card-news--image {
    height: 36rem;
 }
}

@media only screen and (max-width: 43.75em) {
  .section-eco--market {
    padding-bottom: 0;
 }

  .section-eco--market .titlebox {
    margin-bottom: var(--margin-normal);
 }

  .section-image--eco {
    height: 53%;
    align-self: end;
 }

  .section-eco--loan {
    row-gap: 3rem;
    margin-top: -12rem;
 }

  .section-eco--loan div:nth-child(2):not(.titlebox, .textbox) {
    padding: 0 2.5rem;
 }

  .section-eco--news {
    padding-top: 6.4rem;
 }

  .section-eco--news .subheading {
    justify-self: left;
 }
}

@media only screen and (max-width: 34.375em) {
  .section-eco--market {
    padding-bottom: 0;
    row-gap: 4rem;
 }

  .section-eco--market .contentbox {
    margin-top: 3.2rem;
 }

 .section-eco--loan {
   margin-top: -22rem;
 }

  .section-image--eco {
    height: 43%;
    align-self: end;
 }

  .section-eco--news {
    padding-top: 3.2rem;
 }
}