.web-stories-grid {
  --color-text: #041327;
  --margin-y: 40px;
  --items-grid-template-columns: repeat(5, 1fr);
  --items-grid-gap: 16px;
  --button-padding: 24px 36px;
  --button-font-size: 24px;
  --button-line-height: 32px;
  --button-border: 1px solid rgba(3, 14, 29, 0.2);
  --title-font-size: 64px;
  --title-line-height: 66px;
}
.web-stories-grid[data-type=list] {
  --title-font-size: 52px;
  --title-line-height: 62px;
}

body:not(.light) .web-stories-grid {
  --color-text: #fff;
  --button-border: 1px solid rgba(255, 255, 255, .2);
}

@media (max-width: 1440px) {
  .web-stories-grid {
    --items-grid-gap: 14px 10px;
    --title-font-size: 44px;
    --title-line-height: 51px;
  }
}
@media (max-width: 1024px) {
  .web-stories-grid {
    --margin-y: 28px;
    --button-padding: 12px 24px;
    --items-grid-template-columns: repeat(4, 1fr);
    --button-font-size: 15px;
    --items-grid-gap: 12px;
    --title-font-size: 34px;
    --title-line-height: 43px;
  }
  .web-stories-grid[data-type=list] {
    --title-font-size: 34px;
    --title-line-height: 43px;
  }
}
@media (max-width: 870px) {
  .web-stories-grid {
    --button-padding: 12px 18px;
    --items-grid-template-columns: repeat(3, 1fr);
    --button-font-size: 14px;
    --button-line-height: 25px;
    --items-grid-gap: 16px;
  }
}
@media (max-width: 700px) {
  .web-stories-grid {
    --items-grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 375px) {
  .web-stories-grid {
    --items-grid-gap: 12px;
    --title-font-size: 32px;
    --title-line-height: 32px;
  }
  .web-stories-grid[data-type=list] {
    --title-font-size: 28px;
    --title-line-height: 32px;
  }
}
.web-stories-grid {
  margin-top: var(--margin-y);
  margin-bottom: var(--margin-y);
  max-width: 100vw;
  width: 100%;
}

.web-stories-grid__title {
  all: unset;
  color: var(--color-text);
  font-family: "Normalidad Compact";
  font-size: var(--title-font-size) !important;
  font-style: normal;
  font-weight: 400;
  line-height: var(--title-line-height);
}

.web-stories-grid__items {
  display: grid;
  grid-template-columns: var(--items-grid-template-columns);
  grid-auto-rows: 1fr;
  gap: var(--items-grid-gap);
  margin-top: var(--margin-y);
  margin-bottom: var(--margin-y);
}

.web-stories-grid__button-wrapper {
  display: flex;
  justify-content: center;
}

.web-stories-grid__button-wrapper--hide {
  display: none;
}

.web-stories-grid__button {
  all: unset;
  cursor: pointer;
  padding: var(--button-padding);
  color: var(--color-text);
  font-family: "Normalidad Compact";
  font-size: var(--button-font-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--button-line-height);
  border-radius: 8px;
  border: var(--button-border);
  transition: 0.3s;
}

.web-stories-grid__button:hover {
  color: #e65907;
  border: 1px solid #e65907;
  background-color: transparent;
}

.web-stories-grid__button:focus {
  background-color: transparent !important;
}

.web-stories-grid .title-and-buttons .section-title {
  all: unset;
  color: var(--color-text);
  font-family: "Normalidad Compact";
  font-size: 32px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 32px !important; /* 100% */
}

.web-stories-grid .web-stories-grid-slider {
  display: none;
}

@media (max-width: 1024px) {
  .web-stories-grid[data-type=list] {
    margin-top: 20px;
  }
}
@media (max-width: 870px) {
  .web-stories-grid[data-type=list] {
    margin-top: 16px;
  }
}
@media (max-width: 584px) {
  .web-stories-grid {
    overflow: hidden;
    width: 100%;
  }
  .web-stories-grid[data-type=list] .web-stories-grid__title {
    display: block;
    text-align: center;
  }
  .web-stories-grid[data-type=preview] .web-stories-grid-list {
    display: none;
  }
  .web-stories-grid .web-stories-grid-slider {
    display: block;
  }
  .section-block .title-and-buttons .prev-next-btns {
    display: flex !important;
  }
}
@media (max-width: 375px) {
  .web-stories-grid[data-type=list] {
    margin-top: 8px;
  }
}