/* HERO SECTION */
.hero-features {
  gap: var(--gap-medium);
  margin-left: var(--margin-normal);
}

.hero-feature {
  display: flex;
  align-items: center;
  font-family: var(--font-alaska);
  font-weight: var(--weight-medium);
}

.home-hero-slideshow {
  animation: home-hero-slideshow 30s infinite;
}

@keyframes home-hero-slideshow {
  0% { background-image: url("../images/home/img-homepage-hero-1.e0413fafc303.jpg"); }
  20% { background-image: url("../images/home/img-homepage-hero-2.d1eaeb0c7123.jpg"); }
  40% { background-image: url("../images/home/img-homepage-hero-3.ff9e361e1cac.jpg"); }
  60% { background-image: url("../images/home/img-homepage-hero-4.78a197a2aa5d.jpg"); }
  80% { background-image: url("../images/home/img-homepage-hero-5.09a4ebcae360.jpg"); }
  100% { background-image: url("../images/home/img-homepage-hero-1.e0413fafc303.jpg"); }
}

.hero-cta a:link {
  padding: 1.6rem 4rem;
  font-size: var(--font-default);
}

/* ADVANTAGES SECTION */
.section-advantages {
  background-color: var(--color-light-grey);
}

.section-advantages div:nth-child(2):not(.textbox) {
  padding: var(--padding-medium);
}

video {
  width: 100%;
  height: auto;
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-dark);
  margin-top: calc(var(--margin-large) + 0.4rem);
}

/* HOW IT WORKS SECTION */
.card-how {
  padding: var(--padding-card-content);
}

.card-how .card-content {
  padding: 0;
}

.card-how .card-description {
  height: 12rem;
}

.card-how--image {
  height: 9rem;
  margin: var(--margin-small) 0 var(--margin-normal);
  background-size: contain;
}

.card-how--image-1 {
  background-image: url("../images/home/initial-assessment.04c6c226f53b.png");
}

.card-how--image-2 {
  background-image: url("../images/home/non-bidding-offer.6b526cbfa479.png");
}

.card-how--image-3 {
  background-image: url("../images/home/request.9de423b5d5f3.png");
}

.card-how--image-4 {
  background-image: url("../images/home/payout.ed94606cab56.png");
}

.section-how--cards .card-how:last-child {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.section-how--cards .card-how:last-child li {
  color: var(--color-primary);
}

.section-how--cards .card-how:last-child li::before {
  background-color: currentColor;
}

/* NEWS SECTION */
.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");
}

/* NEWSLETTER SECTION */
.newsletter-box {
  background-color: var(--color-light-grey--1);
  border-radius: var(--radius-default);
  box-shadow: var(--shadow-light);
  overflow: hidden;
}

.newsletter-textbox {
  padding: var(--padding-form-textbox);
}

.newsletter-text, .required-text {
  color: var(--text-paragraph);
}

.newsletter-form {
  column-gap: var(--gap-normal);
  row-gap: calc(var(--gap-normal) / 2);
}

.required {
  justify-content: flex-end;
  gap: var(--gap-xsmall);
  position: relative;
}

.form-radio-group,
.newsletter-form fieldset {
  gap: var(--gap-normal);
  margin-top: var(--margin-default);
}

.form-radio--item {
  gap: var(--gap-xsmall);
  align-items: baseline;
}

.form-radio--input {
  height: calc(var(--size-checkbox) - 0.2rem);
}

.newsletter-form input {
  width: 100%;
  padding: var(--padding-small);
  border-radius: calc(var(--radius-small) / 2);
  border: var(--border-default);
}

input.form-checkbox-input {
  height: var(--size-checkbox);
  width: var(--size-checkbox);
  align-self: anchor-center;
}

.newsletter-form fieldset {
  gap: calc(var(--gap-small) * 2);
  border: none;
}

.newsletter-form label,
.newsletter-form legend {
  display: block;
  font-size: inherit;
  font-weight: var(--weight-medium);
  margin-bottom: var(--margin-small);
  position: relative;
}

.newsletter-form legend {
  margin-bottom: var(--margin-default);
}

.newsletter-form fieldset label {
  display: flex;
  gap: calc(var(--gap-xsmall) + 0.3rem);
  background-color: var(--color-light-grey--2);
  padding: calc(var(--padding-small) / 2) calc(var(--padding-normal) / 2);
  border-radius: var(--radius-large);
}

.form-button {
  justify-self: end;
}

.newsletter-form input:active,
.newsletter-form input:focus {
  outline: none;
  border-color: var(--color-light-grey--2);
}

.newsletter-img-box {
  background-image: url("../images/legacy/hero-compressed-1.0cd527879ff9.webp");
  filter: grayscale(0.3);
  background-size: cover;
/*
  margin: var(--margin-default);
  border-radius: var(--radius-default);
*/
}

/* Responsive design */
@media only screen and (max-width: 84.375em) {
  .hero-cta a:link {
    padding: var(--padding-button);
    font-size: var(--font-text-btn);
 }

  .section-advantages div:nth-child(2):not(.textbox) {
    padding: var(--padding-medium) calc(var(--padding-medium) / 2);
 }

 .section-how {
  padding-top: 6.4rem;
 }

 .section-newsletter {
   padding: var(--padding-section-small);
 }

 .card-how--image {
   height: 7rem;

 }

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

@media only screen and (max-width: 70em) {
  .section-hero {
    margin-bottom: var(--margin-default);
 }

  .hero-textbox {
    grid-column: 1 / 4;
    padding-right: 0;
 }

  .cta-position {
    margin-top: 1.5rem;
 }

  .home-hero-slideshow {
    grid-row: 1 / 6;
    height: 98.8%;
    margin-left: 5rem;
 }

  .hero-bg {
    grid-row: 1 / 6;
    height: 103%;
    margin-left: 5rem;
 }

  .section-advantages div {
    grid-template-columns: 1fr;
 }

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

  .section-how {
    padding-top: 3.2rem;
 }

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

  .card-how .card-content {
    padding: var(--padding-card-content);
 }

  .card-how .card-description {
    margin-bottom: var(--margin-default);
 }

  .card-how--image {
    height: 8rem;
    margin: 3rem 0;
 }

  .section-news {
    padding: 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;
 }

  .newsletter-form {
    grid-template-columns: repeat(2, 1fr);
 }
}

@media only screen and (max-width: 56.25em) {
  .home-hero-slideshow {
    transform: scale(0.9);
    height: 77%;
    grid-column: 3 / -1;
 }

  .hero-bg {
    transform: scale(1.53);
    height: 73%;
    grid-column: 4 / -1;
    margin-top: 1.8rem;
    margin-left: 2rem;
 }

  .hero-textbox {
    padding-top: 8rem;
    padding-bottom: 8rem;
 }

  .cta-position {
    margin-top: var(--margin-normal);
 }

  .section-featured {
    padding-top: 3.2rem;
 }

  .section-advantages div:nth-child(2):not(.textbox) {
    padding: 5rem 4rem;
  }

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

 .card-how--image {
    height: 8rem;
 }

 .section-how--cards {
   grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
 }

 .newsletter-box {
   grid-template-columns: 1fr;
 }

 .newsletter-img-box {
   display: none;
 }

 .newsletter-form {
   display: block;
 }

 .newsletter-form .form-group {
   margin-bottom: var(--margin-small);
 }

 .form-radio-group {
   margin: var(--margin-default) 0;
 }

 .newsletter-form fieldset {
   flex-direction: column;
   margin-top: var(--margin-normal);
 }

 .newsletter-btn {
   margin-top: var(--margin-default);
 }

 .col-navs {
   grid-template-columns: 1fr 1fr;
 }
}

@media only screen and (max-width: 43.75em) {
  .section-hero {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
 }

 .hero-textbox {
   grid-row: 2;
   padding-top: 0;
 }

 .home-hero-slideshow {
   grid-row: 1;
   grid-column: 1;
   margin: 0;
   transform: scale(0.8);
   height: 82%;
 }

 .hero-bg {
   grid-row: 1;
   grid-column: 1 / -1;
   margin: 0;
   transform: scale(1);
   padding-right: 0;
   height: 74%;
 }
}

@media only screen and (max-width: 34.375em) {
  .section-hero {
    row-gap: var(--gap-medium);
 }

  .home-hero-slideshow {
    height: 81.5%;
 }

  .hero-bg {
   margin-top: 1.3rem;
 }

  .hero-textbox {
    transform: translateY(-18%);
    padding-bottom: 4rem;
 }

  .section-featured {
    padding-top: 0;
 }

  .card-how--image {
    width: 90%;
    height: 7rem;
 }

  .newsletter-textbox {
    padding: 4.8rem 3.2rem;
 }

  .heading-tertiary {
    margin-bottom: var(--margin-normal);
 }

  .required {
    justify-content: flex-start;
 }

  .newsletter-form {
  margin-top: var(--margin-normal);
 }
}


@media only screen and (max-width: 31.875em) {
  .hero-bg {
    display: none;
  }

  .home-hero-slideshow {
    transform: scale(1);
  }

  .hero-features {
    display: block;
  }
}