.wrapper-box{
  text-align: center;
  padding: 20px 10% 100px;
}

.main-title-page{
  text-shadow: 2px 4px 15px #000;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #333;
  /* clamp(минимум, переменная величина, максимум) */
  font-size: clamp(1rem, 1vw + 1rem, 3rem);
}

.as-title {
  margin: 40px 0 10px;
}
.as-title img {
  width: 100%;
}
.tawog {
  z-index: initial;
}
.twwog{
  z-index: initial;
}

.as-o-s,
.as-s-i{
  display: grid;
  grid: auto / repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

@media screen and (max-width: 1440px) {
  .as-o-s,
.as-s-i{
  grid: auto / repeat(auto-fit, minmax(280px, 1fr));
}
}
@media screen and (max-width: 1100px) {
  .as-o-s,
.as-s-i{
  grid: auto / repeat(auto-fit, minmax(220px, 1fr));
}
}


.season-box{
  border-radius: 6px;
  transition: .8s;
  padding: 10px;
}
.season-box:hover{
  transform: scale(1.05) translateY(-20px);
  transition: .1s;
}

.sb-poster{
  z-index: initial;
}
.sb-poster img{
  width: 100%;
  border-radius: 6px;
}

.sb-titles .t-title{
  font-size: clamp(1rem, 2rem, 3rem);
  color: #fff;
}
.sb-titles .t-desc{
font-weight: 700;
  font-size: clamp(1rem, 1rem, 3rem);
  color: #fff;
}

.s1{
  background-color: #186C45;
}
.s2{
  background-color: #72285C;
}
.s3{
  background-color: #2D7D92;
}
.s4{
  background-color: #593C7C;
}
.s5{
  background-color: #818731;
}
.s6{
  background-color: #F15922;
}
.s7a{
  background-color: #2D578C;
}
.s7b{
  background-color: #0B717A;
}
.s8{
  background-color: #000;
}