/*

Usage:
@include breakpoint(laptop) {
  // styles for laptop and wider
}
@include breakpoint(laptop, 800px) {
  // styles for laptop width and screens up to 800px tall
  // useful for targeting shorter laptop screens
}

@include breakpoint(desktop, 900px) {
  // styles for desktop width but shorter screens
}
  */
/*-----------------------
EASING 
---------------------- */
.layout-collaborative h2, .layout-collaborative h3, .layout-collaborative h4, .layout-collaborative h5, .layout-collaborative h6 {
  color: var(--color-soft-white);
}
.layout-collaborative p {
  color: var(--color-soft-white);
}
.layout-collaborative li {
  color: var(--color-soft-white);
}
.layout-collaborative h2.section-heading {
  font-size: var(--font-size-xl);
}
.layout-collaborative h2.section-heading.numbered {
  position: relative;
  padding-left: 4.5rem;
}
.layout-collaborative h2.section-heading .number {
  color: var(--color-medium-blue);
  font-size: var(--font-size-sm);
  font-stretch: var(--font-width-semicondensed);
  font-weight: var(--font-weight-normal);
  position: absolute;
  line-height: 1;
  top: 10px;
  left: 0;
  letter-spacing: 0;
}
@media (min-width: 1024px) {
  .layout-collaborative h2.section-heading {
    --font-size-xl: 5.5rem;
  }
}
.layout-collaborative .col-heading {
  padding-left: 2.8rem;
  padding-right: 2rem;
}
@media (min-width: 1024px) {
  .layout-collaborative .col-heading {
    padding-left: 0;
    padding-right: 0;
  }
}
.layout-collaborative .col-content {
  padding-left: 2.8rem;
  padding-right: 2rem;
}
@media (min-width: 1024px) {
  .layout-collaborative .col-content {
    padding-left: 0;
    padding-right: 0;
  }
}
.layout-collaborative .col-buttons {
  padding-left: 2.8rem;
  padding-right: 2.8rem;
  text-align: center;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .layout-collaborative .col-buttons {
    padding-left: 0;
    padding-right: 0;
    text-align: initial;
    flex-direction: row;
  }
}
.layout-collaborative .content ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}
.layout-collaborative .content ul li {
  list-style: none;
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: 2.4rem;
}
.layout-collaborative .content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--color-medium-blue);
}
@media (min-width: 1024px) {
  .layout-collaborative .additional-text {
    padding-right: 6.5vw;
  }
}
.layout-collaborative .button-container {
  align-items: center;
  gap: 1.1rem;
}
.layout-collaborative .button-container .button {
  width: 100%;
}
@media (min-width: 1024px) {
  .layout-collaborative .button-container .button {
    width: auto;
  }
}
@media (min-width: 1024px) {
  .layout-collaborative .button-container {
    margin-top: 4rem;
  }
}
.layout-collaborative .button-container p {
  margin-bottom: 0;
  margin-top: 2rem;
  text-align: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .layout-collaborative .button-container p {
    margin-left: auto;
    margin-top: 0;
    text-align: initial;
    width: auto;
  }
}
.layout-collaborative .button-container p a {
  color: var(--color-medium-blue);
  background: linear-gradient(to right, var(--color-medium-blue), var(--color-medium-blue));
  background-size: 100% 0.1rem;
  background-position: 0% 98%;
  background-repeat: no-repeat;
  transition: background-size 0.15s ease-out 0s;
}
.layout-collaborative .button-container p a:hover {
  background-size: 0% 0.1rem;
}
.layout-collaborative .hero-background {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 360/436;
  height: auto;
  border-radius: var(--border-radius-lg);
  margin-top: 3rem;
}
.layout-collaborative .hero-background .bg {
  scale: 1.1;
}
@media (min-width: 1024px) {
  .layout-collaborative .hero-background {
    aspect-ratio: 1021/436;
    scale: 1;
  }
}