/* flickity styles */

/*.carousel-container {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  width: 100%;
  max-width: 1900px;
  min-height: 440px;
  aspect-ratio: 16 / 5.6;
  margin: 108px auto 0;
}*/
.carousel-container {
  display: grid;
  grid-template-columns: 1fr minmax(464px, 464px);
/*  flex-wrap: wrap;*/
  position: relative;
  width: 100%;
  max-width: 1336px;
  min-height: 520px; 
/*  min-height: 480px;*/
/*  aspect-ratio: 16 / 5.4;*/
  aspect-ratio: 16 / 5.8;
/*  margin: 108px auto 0;*/
/*  margin: 96px auto 48px;*/
  margin: 0 auto;
}
.carousel.one {
  background: #EEE;
/*  width: 66%;*/
/*  width: calc(100% / 3 * 2);*/
/*  width: calc(100% / 3.04 * 2);*/
/*  width: calc(100% / 3.07 * 2);*/
/*  height: 100%;*/
  /* margin: 0 auto; */
/*  order: 0;*/
}
.carousel.two {
  background: #2b3d1c;
  /* max-width: 360px; */
  /* height: 160px; */
  /* margin: 0 auto; */
  /* border: 2px solid white; */
  position: relative;
  /* top: -140px; */
/*  width: calc(100% / 3);*/
/*  width: calc(100% / 2.925);*/
/*  width: calc(100% / 2.925);*/
/*  width: calc(100% / 2.87);*/

/*  height: 100%;*/
/*  order: 1;*/
}
.carousel-cell {
  position: relative;
  width: 100%;
  height: 100%;
/*  margin-right: 10px;*/
/*  background: #8C8;*/
  background: #2b3d1c;
/*  border-radius: 5px;*/
  counter-increment: carousel-cell;
}
/*.carousel-cell .copy {
  color: #fff !important;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}*/
.carousel-cell .copy {
  color: #fff !important;
  max-width: 480px;
/*  height: 100%;*/
  height: auto;
  /* padding: 52px; */
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;
  justify-content: space-between;
}
.carousel-cell .copy h3 {
  font: 29px/41px DM Serif Display;
  text-align: left;
  margin-bottom: 6px;
  color: #fff;
}
.carousel-cell .copy h4 {
  font: 17px Urbanist Black;
  margin-bottom: 18px;
}
.carousel-cell .copy h5 {
  font: 19px Urbanist Medium;
  margin-bottom: 18px;
}
.carousel-cell p {
  font: normal 23px/32px D-DIN Condensed;
  color: #fff !important;
  text-align: left;
  padding: 0 !important;
}
/* cell number */
/*.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 140px;
  font-size: 80px;
  color: white;
}*/
.carousel.two .carousel-cell {
  border: none;
  /* padding: 48px 54px 12px 54px; */
  /* padding: 72px 54px; */
  /* padding: 32px 54px; */
  /* padding: 42px 24px 24px 52px; */
/*  padding: 24px 24px 24px 52px;*/
/*  padding: 24px 24px 24px 24px;*/
  padding: 32px;
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
  /* justify-content: center; */
  justify-content: space-between;
}
.carousel-cell img {
display: block;
/*  position: relative;*/
/*  height: 100px;*/
/*  width: 150px;*/
  object-fit: cover;
  object-position: 50% 50%;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.carousel-cell .info {
  width: 100%;
/*  max-width: 385px;*/
  padding-bottom: 19px;
  align-self: flex-start;
}
.cover {
  object-fit: cover;
}
.control-buttons {
  /* width: 76px; */
  /* width: 170px; */
/*  width: 100%;
  height: auto;
  align-self: flex-end;*/
}
.control-buttons img,
.control-buttons svg {
  position: relative;
  width: 72px;
  height: auto;
  cursor: pointer;
}
.control-hit {
  pointer-events: all;
}
.control-hit:hover .arrow {
  fill: white;
}
/* FITTEXT STYLES  */

/* to get scaler for small font to match the big font,
divide the max-size of the big one by the max-size of the small one.
In this example, I made the maxFontSize the same as the size defined in the font tag. */

.fitText h3 {
  --minFontSize: 32px;
  --maxFontSize: 100px;
  --scaler: 10vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}

.fitText h4 {
  --minFontSize: 32px;
  --maxFontSize: 100px;
  --scaler: 10vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
.fitText h5 {
  --minFontSize: 24px;
  --maxFontSize: 32px;
  --scaler: 3.2vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
.fitText p {
  --minFontSize: 12px;
  --maxFontSize: 24px;
  --scaler: 2.4vw;
  font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
@media screen and (max-width: 900px) {
.carousel-container {
/*  display: flex;*/
/*  flex-wrap: wrap;*/
grid-template-columns: 1fr;
/*  position: relative;*/
/*  width: 100%;*/
/*  max-width: 1900px;*/
/*  min-height: 100vh;*/
/*  aspect-ratio: 16 / 5.6;*/
  aspect-ratio: auto;
/*  margin: 0 auto;*/
}

.carousel.one {
/*  width: 100%;*/
/*  height: 40vh;*/
  height: calc(100vh / 3);
/*  height: calc(100vh / 2);*/
/*  order: 2;*/
}
.carousel.two {
  order: 2;
/*  width: 100%;*/
/*  height: 60vh;*/
  height: 448px;
/*  max-height: 448px;*/
/*  height: calc(100vh / 3 * 2);*/
/*  height: calc(100vh / 1.25);*/
/*  order: 1;*/
}
.carousel.two .carousel-cell {
  border: none;
  /* padding: 48px 54px 12px 54px; */
  /* padding: 72px 54px; */
  /* padding: 32px 54px; */
  /* padding: 42px 24px 24px 52px; */
/*  padding: 24px 24px 24px 52px;*/
/*  padding: 24px 24px 24px 24px;*/
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
  /* justify-content: center; */
  justify-content: space-between;
}
.carousel-cell .copy {
  color: #fff !important;
/*  height: 100%;*/
  /* padding: 52px; */
/*  padding-bottom: 84px;*/
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;
  justify-content: space-between;
}
.carousel-cell .info {
  max-width: 100%;
  padding-bottom: 24px;
  align-self: flex-start;
}
.carousel-cell .copy h4 {
  font: 15px/15px Urbanist Black;
  margin-bottom: 18px;
}
.carousel-cell .copy h3 {
  font: 24px/36px DM Serif Display;
  margin-bottom: 12px;
  /* color: #fff; */
}
.carousel-cell .copy h5 {
  font: 17px Urbanist Medium;
  margin-bottom: 18px;
}
.carousel-cell p {
  font: normal 20px/28px D-DIN Condensed;
  color: #fff !important;
  text-align: left;
  padding: 0 !important;
}
}