/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */


/* target the images inside your carousel items */
.carousel-item > img {
  display: block;
  width: 100%;
  /* Force a native 4:5 vertical portrait aspect ratio directly on the image */
  aspect-ratio: 4 / 5; 
  /* Crop the edges cleanly without compressing or squishing the pixels */
  object-fit: cover; 
}




/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  /* rtl:remove */
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 4rem;
  }
}


hr {
  margin: $hr-margin-y 0;
  color: #fff;
  background-color: #fff;
  border: 0;
}

/*--------------------------------------------------------------
    Featurette Engineering Grid Background
--------------------------------------------------------------*/

.featurette{
    position:relative;
    overflow:hidden;
    background:#fff;
    isolation:isolate;
}

.featurette::before{

    content:"";

    position:absolute;
    inset:0;

    z-index:0;
    pointer-events:none;

    /* notebook grid */
    background:

    /* fade from left */
    linear-gradient(
        to right,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.92) 8%,
        rgba(255,255,255,0) 24%
    ),

    /* fade from right */
    linear-gradient(
        to left,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.92) 8%,
        rgba(255,255,255,0) 24%
    ),

    /* fade from top */
    linear-gradient(
        to bottom,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.92) 8%,
        rgba(255,255,255,0) 24%
    ),

    /* fade from bottom */
    linear-gradient(
        to top,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.92) 8%,
        rgba(255,255,255,0) 24%
    ),

    /* vertical grid */
    repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 79px,
        rgba(155,155,155,.52) 80px
    ),

    /* horizontal grid */
    repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 79px,
        rgba(155,155,155,.52) 80px
    );

}

/* keep content above the background */

.featurette>*{
    position:relative;
    z-index:1;
}