/* CSS for the update-slider block */

.uc-head-controls {
    display: grid;
    grid-template: auto auto / auto max-content;
    align-items: center;
}

.uc-head-controls h2 {
    margin: 0;
    font-size: 2.125rem;
    line-height: 1;
    display: block;
    font-weight: 600;
    grid-area: 1 / 1 / 2 / 3;
}

.uc-head-controls .btn {
  font-size: 1.25rem;
}

.csel-outer-box {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding-block: 0 30px;
  padding-inline: 0;
}

.csel-controls {
  justify-self: end;
  padding-inline: 14px;
  padding-block: 6px 0;
}

.all-updates-btn {
  padding-block: 6px 0;
}

.csel-control {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: relative;
  top: 5px;
  border-radius: 5px;
  line-height: 1;
  background-color: var(--light);
  color: var(--uae-flag-green);
}
.csel-control a {
  display: block;
  width: 100%;
  height: 100%;
}
.csel-control svg {
  height: 28px;
  width: auto;
  display: block;
  margin-inline: auto;
  margin-block: 4px;
  fill: var(--uae-flag-green);
}
.csel-slide-l {
  margin-inline: 8px 4px;
}

.update-carousel p {
  margin-block-start: 8px;
}

@media (min-width: 560px){
  .uc-head-controls h2 {
      grid-area: auto;
  }
  .uc-head-controls {
      display: grid;
      grid-template: 1fr / auto auto max-content;
      align-items: center;
  }
  .csel-controls {
    padding-block: 0;
  }
  .all-updates-btn {
    padding-block: 0;
  }

}

@media (min-width: 700px){
  .uc-head-controls h2 {
      margin: 0;
      font-size: 2.5rem;
      line-height: 1;
      display: inline-block;
      font-weight: 600;
  }
  .uc-head-controls .btn {
    font-size: 1.5rem;
  }

  .csel-control {
    height: 44px;
    width: 44px;
  }
  .csel-control svg {
    height: 32px;
    margin-block: 4px;
  }
  .csel-slide-l {
    margin-inline: 14px 10px;
  }
  .csel-outer-box {
    padding-block: 0 75px;
  }

}

.csel-slide {
  grid-area: 1 / 1 / 2 / 4;
}
h2.csel-title {
    font-size: 1.5em;
}
  /* 12 slides in the slider. 12*2 = 24 */
  /* 1.3 slides visible at small screen size */
  /* These figures (12, 24 and 1.3) plus the chosen gap value (30px) are used to calculate everything else. Just plug them into the formulae below */
.csel-inner-box {
  height: 100%;
  display: grid;
  grid-template: 1fr / 8% 84% 8%;

  font-size: calc(0.061 * ((100vw / 1.3) - 30px));
}
.csel-frame {
  display: grid;
  height: 100%;
  grid-template-rows: 1fr;

  gap: 30px;
  grid-template-columns: repeat(
      24, 
      calc( 
        (100% / 1.3) - 30px 
      ) 
    );
  transform: translateX( calc( 
    0px -
    ( 12 * 
      ( 100% / 1.3 ) 
    ) + 
    ( (100% - 
      (0 * ( 100% / 1.4 )) -
      ((100% / 1.3) - 30px)) 
      / 2 
    )
  ) );
  transition-property: transform, opacity;
  transition-duration: 1.2s, .35s;
  transition-timing-property: ease-in-out, linear;
  transition-delay: 0s, 0s;
}
a.csel-item {
  display: block;
  height: 100%;
  width: 100%;
  text-decoration: none;
  font-weight: 600;
  background-color: var(--light);
  color: var(--uae-text-black);
  outline: none !important;
  line-height: 1.125;
  border: none !important;
  padding: 15px;
  border-radius: 5px;
}
a.csel-item:hover, .csel-item:focus {
    background-color: var(--uae-flag-green-10);
    color: var(--uae-text-black);
}
.csel-item figure {
  background-color: transparent;
  display: grid;
  height: 100%;
  width: 100%;
  grid-template: max-content auto auto / 1fr;
  align-items: start;
}
.csel-featured-image {
  width: 100%;
  aspect-ratio: 560 / 498;
  overflow: hidden;
}
.csel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  padding: 0;
  margin: 0;
  border-radius: 5px;
}
h3.csel-title {
  font-size: 1.5em;
  margin-block: 0 1.4rem;
  line-height: 1.25;
}
.csel-group-name {
  font-weight: 400;
  font-size: 1.125em;
  line-height: 1.25;
  padding-block: 1.5625em 0.6255em;
}
.csel-read-more {
  color: var(--uae-flag-green);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
  font-size: 1.2em;
  align-self: end;
}

  /* 12 slides in the slider. 12*2 = 24 */
  /* 1.3 slides visible at small screen size */
  /* These figures (12, 24 and 1.3) plus the chosen gap value (30px) are used to calculate everything else. Just plug them into the formulae below */
/*
  gap: 30px;
  grid-template-columns: repeat(
      24, 
      calc( 
        (100% / 1.3) - 30px 
      ) 
    );
  transform: translateX( calc( 
    0px -
    ( 12 * 
      ( 100% / 1.3 ) 
    ) + 
    ( (100% - 
      ((100% / 1.3) - 30px)) 
      / 2 
    )
  ) );
*/
@media (min-width: 600px) {
/* 12 slides in the slider. 12*2 = 24 */
  /* 2.4 slides visible at small screen size */
  /* These figures (12, 24 and 2.4) plus the chosen gap value (30px) are used to calculate everything else. Just plug them into the formulae below */
  .csel-inner-box {
    font-size: calc(0.061 * ((100vw / 2.4) - 30px));
  }
  .csel-frame {
  gap: 30px;
  grid-template-columns: repeat(
      24, 
      calc( 
        (100% / 2.4) - 30px 
      ) 
    );
  transform: translateX( calc( 
    0px -
    ( 12 * 
      ( 100% / 2.4 ) 
    ) + 
    ( (100% - 
      (1 * ( 100% / 2.4 )) -
      ((100% / 2.4) - 30px)) 
      / 2 
    )
  ) );
  }
}

@media (min-width: 782px) {
  .csel-outer-box {
    padding-block: 0 75px;
    padding-inline: 0;
  }
}

@media (min-width: 840px) {
/* 12 slides in the slider. 12*2 = 24 */
  /* 3.4 slides visible at small screen size */
  /* These figures (12, 24 and 3.4) plus the chosen gap value (35px) are used to calculate everything else. Just plug them into the formulae below */
  .csel-inner-box {
    font-size: calc(0.061 * ((100vw / 3.4) - 35px));
  }
  .csel-frame {
  gap: 35px;
  grid-template-columns: repeat(
      24, 
      calc( 
        (100% / 3.4) - 35px 
      ) 
    );
  transform: translateX( calc( 
    0px -
    ( 12 * 
      ( 100% / 3.4 ) 
    ) + 
    ( (100% - 
      (2 * ( 100% / 3.4 )) -
      ((100% / 3.4) - 35px)) 
      / 2 
    )
  ) );
  }
}

@media (min-width: 1100px) {
/* 12 slides in the slider. 12*2 = 24 */
  /* 4.4 slides visible at small screen size */
  /* These figures (12, 24 and 3.4) plus the chosen gap value (40px) are used to calculate everything else. Just plug them into the formulae below */
  .csel-inner-box {
    font-size: calc(0.061 * ((100vw / 4.4) - 40px));
  }
  .csel-frame {
  gap: 40px;
  grid-template-columns: repeat(
      24, 
      calc( 
        (100% / 4.4) - 40px 
      ) 
    );
  transform: translateX( calc( 
    0px -
    ( 12 * 
      ( 100% / 4.4 ) 
    ) + 
    ( (100% - 
      (3 * ( 100% / 4.4 )) -
      ((100% / 4.4) - 40px)) 
      / 2 
    )
  ) );
  }
}

@media (min-width: 1350px) {
/* 12 slides in the slider. 12*2 = 24 */
  /* 4.4 slides visible at small screen size */
  /* These figures (12, 24 and 3.4) plus the chosen gap value (40px) are used to calculate everything else. Just plug them into the formulae below */
  .csel-inner-box {
    font-size: calc(0.061 * ((100vw / 4.4) - 50px));
  }
  .csel-frame {
  gap: 50px;
  grid-template-columns: repeat(
      24, 
      calc( 
        (100% / 4.4) - 50px 
      ) 
    );
  transform: translateX( calc( 
    0px -
    ( 12 * 
      ( 100% / 4.4 ) 
    ) + 
    ( (100% - 
      (3 * ( 100% / 4.4 )) -
      ((100% / 4.4) - 50px)) 
      / 2 
    )
  ) );
  }
}

@media (min-width: 1600px) {
/* 12 slides in the slider. 12*2 = 24 */
  /* 6.4 slides visible at small screen size */
  /* These figures (12, 24 and 3.4) plus the chosen gap value (40px) are used to calculate everything else. Just plug them into the formulae below */
  .csel-inner-box {
    font-size: calc(0.061 * ((100vw / 6.4) - 40px));
  }
  .csel-frame {
  gap: 40px;
  grid-template-columns: repeat(
      24, 
      calc( 
        (100% / 6.4) - 40px 
      ) 
    );
  transform: translateX( calc( 
    0px -
    ( 12 * 
      ( 100% / 6.4 ) 
    ) + 
    ( (100% - 
      (5 * ( 100% / 6.4 )) -
      ((100% / 6.4) - 40px)) 
      / 2 
    )
  ) );
  }
}

@media (min-width: 2000px) {
/* 12 slides in the slider. 12*2 = 24 */
  /* 6.4 slides visible at small screen size */
  /* These figures (12, 24 and 3.4) plus the chosen gap value (60px) are used to calculate everything else. Just plug them into the formulae below */
  .csel-inner-box {
    font-size: calc(0.061 * ((100vw / 6.4) - 60px));
  }
  .csel-frame {
  gap: 60px;
  grid-template-columns: repeat(
      24, 
      calc( 
        (100% / 6.4) - 60px 
      ) 
    );
  transform: translateX( calc( 
    0px -
    ( 12 * 
      ( 100% / 6.4 ) 
    ) + 
    ( (100% - 
      (5 * ( 100% / 6.4 )) -
      ((100% / 6.4) - 60px)) 
      / 2 
    )
  ) );
  }
}

@media (min-width: 2250px) {
/* 12 slides in the slider. 12*2 = 24 */
  /* 6.4 slides visible at small screen size */
  /* These figures (12, 24 and 3.4) plus the chosen gap value (100px) are used to calculate everything else. Just plug them into the formulae below */
  .csel-inner-box{
    font-size: calc(0.061 * ((100vw / 6.4) - 100px));
  }
/*
  .csel-inner-box {
    font-size: calc(0.061 * ((100vw / 6.4) - 100px));
  }
*/
  .csel-frame {
  gap: 100px;
  grid-template-columns: repeat(
      24, 
      calc( 
        (100% / 6.4) - 100px 
      ) 
    );
  transform: translateX( calc( 
    0px -
    ( 12 * 
      ( 100% / 6.4 ) 
    ) + 
    ( (100% - 
      (5 * ( 100% / 6.4 )) -
      ((100% / 6.4) - 100px)) 
      / 2 
    )
  ) );
  }
}

@media (min-width: 2900px) {
/* 12 slides in the slider. 12*2 = 24 */
  /* 12.4 slides visible at small screen size */
  /* These figures (12, 24 and 3.4) plus the chosen gap value (60px) are used to calculate everything else. Just plug them into the formulae below */
  .csel-inner-box {
    font-size: calc(0.061 * ((100vw / 12) - 40px));
  }
  .csel-frame {
  gap: 40px;
  grid-template-columns: repeat(
      24, 
      calc( 
        (100% / 12) - 40px 
      ) 
    );
  transform: translateX( 20px );
  }
  .csel-control {
    display: none !important;
  }
}