/**
 * Featured
 */

.featured {
  position: relative;
}
.featured::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;
  height: 175px;
  z-index: -1;
}
.featured--primary::before {
  background-color: var(--brand-primary-light-color);
}
.featured--secondary::before {
  background-color: var(--brand-secondary-light-color);
}
.featured__text {
  max-width: 450px;
  margin: 0 auto;
}
.featured__text h2 {
  line-height: 1.3;
}
.featured__image img {
  margin: 0 auto;
  border-radius: 2px;
}
.featured__links {
  text-align: center;
}
.featured__links .field__item:not(:first-child) {
  margin-top: 1rem;
}
@media all and (min-width: 768px) {
  .featured {
    /** Featured Gradiant Size **/

    --featured-default-left: 60%;
    --featured-default-right: 40%;
    margin: 0 0 7rem;

  }
  .featured__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 1rem;
  }
  .featured::before {
    content: none;
  }
  .featured__wrapper {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    position: relative;
  }
  .featured__wrapper::before {
    content: "";
    display: block;
    position: absolute;
    left: -65px;
    right: 65px;
    top: 50px;
    bottom: -50px;
    z-index: -1;
    background: linear-gradient(90deg, var(--brand-primary-light-color) 0%, var(--brand-primary-light-color) var(--featured-default-left), var(--brand-white) var(--featured-default-left));
    max-height: 350px;
  }
  .featured--secondary .featured__wrapper::before {
    background: linear-gradient(90deg, var(--brand-secondary-light-color) 0%, var(--brand-secondary-light-color) var(--featured-default-left), var(--brand-white) var(--featured-default-left));
  }
  .featured--right .featured__wrapper {
    flex-direction: row-reverse;
  }
  .featured--right .featured__wrapper::before {
    left: 65px;
    right: -65px;
    background: linear-gradient(90deg, var(--brand-white) var(--featured-default-right), var(--brand-primary-light-color) var(--featured-default-right), var(--brand-primary-light-color) 100%);
  }
  .featured--secondary.featured--right .featured__wrapper::before {
    background: linear-gradient(90deg, var(--brand-white) var(--featured-default-right), var(--brand-secondary-light-color) var(--featured-default-right), var(--brand-secondary-light-color) 100%);
  }
  .featured__text {
    max-width: initial;
    margin: 0;
  }
  .featured__content {
    width: 550px;
    margin: 0 auto;
  }
  .featured__links {
    text-align: left;
  }
}
@media all and (min-width: 1000px) {
  .featured__content {
    margin-top: 3rem;
  }
  .featured__wrapper::before {
    max-height: 400px;
  }
}
/** Yeah I know it's shitty but I don't care **/

@media all and (min-width: 1100px) {
  .featured {
    --featured-default-left: 53%;
    --featured-default-right: 47%;
  }
}
@media all and (min-width: 1200px) {
  .featured {
    --featured-default-left: 57%;
    --featured-default-right: 43%;
  }
  .featured__wrapper {
    transform: translateX(-5.09%);
  }
  .featured--right .featured__wrapper {
    transform: translateX(5.09%);
  }
}
@media all and (min-width: 1300px) {
  .featured__text {
    max-width: 550px;
  }
  .featured__content {
    width: initial;
  }
  .featured__wrapper::before {
    max-height: 450px;
  }
}
@media all and (min-width: 1350px) {
  .featured {
    --featured-default-left: 60%;
    --featured-default-right: 40%;
  }
  .featured__wrapper {
    transform: translateX(-5.38%);
  }
  .featured--right .featured__wrapper {
    transform: translateX(5.38%);
  }
}
@media all and (min-width: 1400px) {
  .featured {
    --featured-default-left: 57%;
    --featured-default-right: 43%;
  }
}
@media all and (min-width: 1500px) {
  .featured {
    --featured-default-left: 53%;
    --featured-default-right: 47%;
  }
}
@media all and (min-width: 1600px) {
  .featured {
    --featured-default-left: 47%;
    --featured-default-right: 53%;
  }
}

/** Featured Full Width **/

@media all and (min-width: 768px) {
  .featured--full-width .featured__wrapper {
    position: initial;
  }
  .featured--full-width .featured__wrapper::before {
    left: 0;
    right: 0;
    top: 50px;
    bottom: -50px;
    background: var(--brand-primary-light-color);
  }
  .featured--full-width.featured--secondary .featured__wrapper::before {
    background: var(--brand-secondary-light-color);
  }
  .featured--full-width .featured__content {
    margin-top: 3.5rem;
  }
}
@media all and (min-width: 1200px) {
  .featured--full-width .featured__wrapper {
    transform: none;
  }
  .featured--full-width .featured--right .featured__wrapper {
    transform: none;
  }
  .featured--full-width .featured__content {
    margin-top: 5rem;
  }
}

/** Featured Image Large **/

@media all and (min-width: 768px) {
  .featured {

    /** Featured Image Large Gradiant Size **/

    --featured-image-large-left:  47%;
    --featured-image-large-right: 47%;
  }
  .featured--image-large .featured__wrapper::before {
    right: 0;
    bottom: 30px;
    left: -65px;
    background: linear-gradient(90deg, var(--brand-primary-light-color) 0%, var(--brand-primary-light-color) var(--featured-image-large-left), var(--brand-white) var(--featured-image-large-left));
  }
  .featured--image-large.featured--secondary .featured__wrapper::before {
    background: linear-gradient(90deg, var(--brand-secondary-light-color) 0%, var(--brand-secondary-light-color) var(--featured-image-large-left), var(--brand-white) var(--featured-image-large-left));
  }
  .featured--image-large.featured--right .featured__wrapper::before {
    right: 30px;
    left: 0;
    background: linear-gradient(90deg, var(--brand-white) var(--featured-image-large-right), var(--brand-primary-light-color) var(--featured-image-large-right), var(--brand-primary-light-color) 100%);
  }
  .featured--image-large.featured--secondary.featured--right .featured__wrapper::before {
    background: linear-gradient(90deg, var(--brand-white) var(--featured-image-large-right), var(--brand-secondary-light-color) var(--featured-image-large-right), var(--brand-secondary-light-color) 100%);
  }
}
@media all and (min-width: 825px) {
  .featured--image-large .featured__wrapper::before {
    bottom: 0px;
  }
}
@media all and (min-width: 900px) {
  .featured--image-large .featured__wrapper::before {
    bottom: -25px;
  }
}
@media all and (min-width: 950px) {
  .featured--image-large .featured__wrapper::before {
    bottom: -40px;
  }
}
@media all and (min-width: 1000px) {
  .featured {
    --featured-image-large-left:  42%;
  }
}
@media all and (min-width: 1200px) {
  .featured {
    --featured-image-large-left:  50%;
    --featured-image-large-right: 40%;
  }
  .featured--image-large .featured__wrapper {
    transform: translateX(-11%);
  }
  .featured--image-large.featured--right .featured__wrapper {
    transform: translateX(11%);
  }
}
@media all and (min-width: 1300px) {
  .featured--image-large .featured__wrapper::before {
    bottom: -25px;
  }
}
@media all and (min-width: 1400px) {
  .featured--image-large .featured__wrapper::before {
    bottom: -40px;
  }
}
@media all and (min-width: 1500px) {
  .featured {
    --featured-image-large-left:  42%;
    --featured-image-large-right: 42%;
  }
}
@media all and (min-width: 1600px) {
  .featured {
    --featured-image-large-left:  45%;
    --featured-image-large-right: 45%;
  }
}