@import url(./nav.css);
@import url(./footer.css);

/* INDEX */
:root {
  --size36-7: min(36px, 7vw);
  --size64-12: min(64px, 12vw);
  --size80-15: min(80px, 15vw);
}

h4 { font-weight: 700 }
.await { pointer-events: none }

.banner {
  cursor: pointer;
  padding: 0 !important
}

.shop-cart {
  z-index: 1;
  display: flex;
  position: absolute;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-paper)
}

.shop-cart .btn-cart.btn {
  padding: 0;
  border: none;
  display: flex;
  cursor: pointer;
  border-radius: 50%;
  align-items: center;
  color: var(--secondary);
  justify-content: center;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  background-color: var(--bg-paper)
}

.shop-cart .btn-cart i {
  pointer-events: none;
  color: var(--secondary)
}

.shop-cart .btn-cart.active {
  background-color: var(--secondary);
  box-shadow: var(--shadow0005-secondary),
              var(--shadow0010-secondary),
              var(--shadow0015-secondary),
              var(--shadow0020-secondary)
}

.more {
  grid-row: 3;
  display: flex;
  grid-column: 4;
  cursor: pointer;
  align-self: center;
  justify-self: flex-end;
  justify-content: center
}

.more i {
  z-index: 3;
  color: var(--secondary);
  border-radius: 50% 50% 0 50%;
  background-color: var(--bg-paper)
}

.more .more-info {
  z-index: 2;
  display: flex;
  position: absolute;
  gap: var(--size60-13);
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center;
  padding: var(--size16-5);
  color: var(--text-primary);
  backdrop-filter: blur(8px);
  transition: var(--transition);
  border-radius: var(--size16-5);
  text-shadow: 0 0 2px var(--bg-default);
  background-color: var(--blur-secondary)
}

.more .more-info p span {
  font-weight: 700;
  font-size: 16px !important
}

.more .more-info .title {
  gap: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column
}

.more .more-info:nth-child(2) { margin-top: var(--size48-10) }

.more .more-info .title .name { font-size: var(--size24-5) }
.more .more-info .title .slogan { text-align: center }

.more .more-info .content-data {
  display: flex;
  gap: var(--size24-5);
  flex-direction: column;
}

.more .more-info .content-data .data {
  gap: 8px;
  display: flex;
}

.more .more-info .content-data .data span { font-size: 48px }

.more .more-info .content-data .data .data-info  {
  gap: 8px;
  height: 100%;
  display: flex;
  flex-direction: column
}

.more .more-info .indicative-age  {
  width: 100%;
  text-align: center
}

.more.active i { font-variation-settings: 'FILL' 1 }

.play {
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 90;
  width: 100%;
  height: 100vh;
  display: none;
  position: fixed;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  background-color: var(--bg-footer)
}

.play .container {
  position: relative;
  padding: var(--size30-5);
  background-color: var(--bg-default)
}

.play .container .close {
  opacity: 1;
  display: flex;
  cursor: pointer;
  position: absolute;
  border-radius: 50%;
  align-items: center;
  color: var(--bg-paper);
  justify-content: center;
  width: var(--size40-10);
  height: var(--size40-10);
  font-size: var(--size24-3);
  transition: var(--transition);
  top: calc(var(--size30-5) / 3);
  right: calc(var(--size30-5) / 3);
  background-color: var(--bg-footer)
}

.play.active {
  opacity: 1;
  display: flex;
  transition: var(--transition)
}

.networks-product {
  width: 100%;
  display: flex;
  gap: min(12px, 2vw);
  align-items: center;
  grid-column: span 4;
  justify-self: flex-end;
  justify-content: flex-end;
}

.networks-product a {
  height: 100%;
  display: flex;
  border: none;
  outline: none;
  cursor: pointer;
  text-align: center;
  border-radius: 50%;
  align-items: center;
  color: var(--bg-paper);
  justify-content: center;
  transition: var(--transition);
  background-color: var(--secondary);
  box-shadow: 2px 2px 8px var(--shadow)
}

.networks {
  display: flex;
  gap: min(12px, 2vw);
  align-items: center;
  box-sizing: border-box;
  height: min(35px, 5.75vw)
}

.networks a.btn {
  padding: 0;
  display: flex;
  cursor: pointer;
  text-align: center;
  border-radius: 50%;
  font-size: var(--size16-3);
  background-color: var(--secondary)
}

.voucher {
  top: 0;
  z-index: 10;
  display: flex;
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  transform: scale(0);
  align-items: center;
  color: var(--bg-paper);
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: var(--transition);
  background-color: var(--bg-footer)
}

.voucher.active { transform: scale(1) }

.voucher .description {
  width: min(570px, 100%);
  border-radius: var(--size16-3);
  background-color: var(--bg-default)
}

.voucher .description .info {
  display: flex;
  flex-direction: column
}

.voucher .description .info .close {
  padding: 16px;
  cursor: pointer;
  align-self: flex-end
}

.voucher .description .info .banner {
  width: 100%;
  height: 256px
}

.voucher .description .info .content {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 0 16px 16px;
}

.voucher .description .info .content .title {
  gap: 4px;
  width: 100%;
  display: flex;
  margin-top: 32px;
  flex-direction: column
}

.voucher .description .info .content .title .divider {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr)
}

.voucher .description .info .content .title .divider div:first-child,
.voucher .description .info .content .title .divider .div:last-child { height: 5px }

.voucher .description .info .content .title .divider div:first-child {
  grid-column: span 2;
  background-color: var(--ternary)
}

.voucher .description .info .content .title .divider div:last-child {
  grid-column: span 10;
  background-color: var(--secondary)
}

.voucher .description .info .content .place {
  gap: 16px;
  padding: 16px;
  display: flex;
  margin-top: 16px;
  box-sizing: border-box;
  flex-direction: column;
  width: calc(100% - 16px);
  color: var(--text-secondary);
  border-radius: var(--size16-3);
  background-color: var(--bg-paper)
}

.voucher .description .info .content .place .stages {
  gap: 16px;
  width: 100%;
  display: flex;
  box-sizing: border-box;
  color: var(--text-secondary);
  border-radius: var(--size16-3);
  background-color: var(--bg-paper)
}

.voucher .description .info .content .place .stages .stage {
  gap: 16px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  /* flex-direction: column; */
  justify-content: center
}

.voucher .description .info .content .place .stages .stage .btn-action {
  width: 100%;
  color: var(--bg-paper);
  background-color: var(--secondary);
  box-shadow: var(--shadow0010-secondary)
}

.voucher .description .info .content .place .stages .stage .btn-action:nth-child(2) {
  color: var(--secondary);
  background-color: var(--bg-paper);
  border: 1px solid var(--secondary)
}

.hero {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  padding: 40px 0 var(--size15-4);
  background: var(--bg-default) center no-repeat;
  background-size: cover
}

.hero article {
  height: 0;
  z-index: -1;
  position: absolute;
  width: min(1200px, 100%)
}

.hero .container {
  padding: 0;
  height: 100%;
  overflow: hidden;
  justify-content: center;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: var(--transition)
}

.hero .container .swipe {
  width: 100%;
  min-height: 470px;
  max-height: 744px;
  position: relative;
  height: calc(70vh - 64px);
}

.hero .container .swipe .logo {
  z-index: 2;
  padding: 10px;
  display: flex;
  border-radius: 50%;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: min(120px, 25vw);
  height: min(120px, 25vw);
  background-color: #000;
  backdrop-filter: blur(8px);
  background-clip: border-box;
  top: calc(-10px + (min(120px, 25vw) / (-2)));
  left: calc(50% + ((min(70px, 15vw) * (-1))))
}

.hero .container .list {
  width: 100%;
  cursor: grab;
  height: 100%;
  position: relative
}

.hero .container .list li {
  left: 50%;
  height: 100%;
  cursor: grab;
  display: none;
  position: absolute;
  list-style-type: none;
  width: min(480px, 75vw);
  background: var(--bg-paper);
  border-radius: var(--size16-5);
  transition: transform 200ms;
  margin-left: calc((min(480px, 75vw) / 2) * -1)
}

.hero .container .list li .content {
  width: 100%;
  height: 100%;
  display: grid;
  position: relative;
  align-items: center;
  grid-template-rows: 82% 1fr;
  border-radius: var(--size16-5)
}

.hero .container .list li .content .banner {
  width: 100%;
  grid-row: 1;
  height: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
  background-size: cover;
  justify-content: center;
  border-radius: var(--size16-5);
  background: center no-repeat;
  background-size: cover
}

.hero .container .list li .content .banner .icons {
  right: -72px;
  display: flex;
  transition: .75s;
  position: absolute;
  width: max-content;
  height: max-content;
  align-items: center;
  top: calc(50% - 90px);
  box-sizing: border-box;
  transition: var(--transition)
}

.hero .container .list li .content .banner .icons.active { right: 0 }
.hero .container .list li .content .banner .icons.disabled { display: none }

.hero .container .list li .content .banner .icons i,
.hero .container .list li .content .banner .icons .open {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: var(--size24-3);
  transition: var(--transition)
}

.hero .container .list li .content .banner .icons i {
  padding: 4px 8px;
  border-radius: 50%;
  color: var(--bg-paper)
}

.hero .container .list li .content .banner .icons .open {
  width: 36px;
  height: 100px;
  backdrop-filter: blur(8px);
  border-radius: 40px 0 0 40px;
  background-color: var(--blur-paper)
}

.hero .container .list li .content .banner .icons .open.active i { transform: rotateZ(180deg) }

.hero .container .list li .content .banner .icons .icon-list {
  gap: 32px;
  display: flex;
  padding: 32px 16px;
  height: max-content;
  align-items: center;
  flex-direction: column;
  backdrop-filter: blur(8px);
  border-radius: 16px 0 0 16px;
  justify-content: space-between;
  background-color: var(--blur-paper)
}

.hero .container .list li .content .banner .icons .icon-list .ico.btn {
  padding: 0;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  width: var(--size40-10);
  height: var(--size40-10);
  background-color: var(--bg-paper)
}

.hero .container .list li .content .banner .icons .icon-list .ico i,
.hero .container .list li .content .banner .icons .icon-list .ico a {
  padding: 0;
  font-size: 32px;
  color: var(--secondary);
  transition: var(--transition)
}

.hero .container .list li .content .banner .icons .icon-list .ico .active { font-variation-settings: 'FILL' 1 }

.hero .container .list li .content .banner .icons .icon-list .ico img {
  width: 36px;
  height: 36px;
}

.hero .container .list li .content .banner .icons .icon-list .ico.disabled a {
  cursor: auto;
  color: var(--disabled)
}

.hero .container .list li .content .shop-cart {
  grid-row: 1;
  left: var(--size24-3);
  width: var(--size80-15);
  height: var(--size80-15);
  top: calc(82% - ((var(--size80-15)) / 2));
  /* box-shadow: inset 0 -2px 8px var(--bg-card) */
}

.hero .container .list li .content .shop-cart .btn-cart {
  width: var(--size64-12);
  height: var(--size64-12)
}

.hero .container .list li .content .shop-cart .btn-cart i { font-size: var(--size36-7) }

.hero .container .list li .content .shop-cart .active i { color: var(--bg-paper) }
.hero .container .list li .content .shop-cart .btn-cart:disabled {
  cursor: auto;
  pointer-events: none;
  box-shadow: var(--disabled-shadow)
}

.hero .container .list li .content .shop-cart .btn-cart:disabled i {
  text-shadow: none !important;
  color: var(--disabled) !important
}

.hero .container .list li .content .shop-cart .btn-cart:disabled underline {
  text-shadow: none;
  color: var(--secondary);
  font-size: var(--size30-5)
}



.hero .container .list li .content .end-slide {
  width: 100%;
  grid-row: 2;
  height: 100%;
  display: grid;
  align-self: flex-end;
  box-sizing: border-box;
  padding: var(--size24-3);
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: var(--size40-8-25) 14px var(--size30-5)
}

.hero .container .list li .content .end-slide .networks-product .networks a.btn {
  width: var(--size32-5-75);
  height: var(--size32-5-75)
}

.hero .container .list li .networks-product .product-btn {
  cursor: pointer;
  max-height: 40px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: var(--size20-5);
}

.hero .container .list li .content .end-slide .sponsored {
  width: 100%;
  grid-row: 2;
  text-align: left;
  grid-column: span 4;
  align-self: flex-end;
  height: min(14px, 3vw);
  color: var(--secondary);
  font-size: min(14px, 3vw)
}

.hero .container .list li .content .end-slide .rating {
  grid-row: 3;
  height: 100%;
  display: flex;
  grid-column: 1;
  font-size: 20px;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between
}

.hero .container .list li .content .end-slide .rating i {
  cursor: pointer;
  color: var(--secondary);
  font-size: var(--size24-5);
  transition: var(--transition)
}

.hero .container .list li .content .end-slide .more .more-info {
  width: 80%;
  left: var(--size24-3);
  bottom: var(--size24-3);
  height: min(485px, 55vh);
  transform: translate(62.75%, 49%) scale(0)
}

.hero .container .list li .content .end-slide .rating .active { font-variation-settings: 'FILL' 1 }
.hero .container .list li .content .end-slide .more.active .more-info { transform: translate(7%, -1%) scale(1) }

.hero .container .list .hide,
.hero .container .list .prev,
.hero .container .list .act,
.hero .container .list .next,
.hero .container .list .new-next { display: flex }

.hero .container .list .hide,
.hero .container .list .prev,
.hero .container .list .next,
.hero .container .list .new-next { opacity: .85 }

.hero .container .list .act { opacity: 1 }

.hero .container .list .prev .banner,
.hero .container .list .next .banner { cursor: pointer }

.hero .container .list .prev .shop-cart .btn,
.hero .container .list .next .shop-cart .btn,
.hero .container .list .prev .end-slide .networks .btn,
.hero .container .list .next .end-slide .networks .btn { pointer-events: none }

.hero .container .list .prev { transform: translateX(calc(min(480px, 72.5vw) * -1)) scale(.85) }
.hero .container .list .next { transform: translateX(min(480px, 72.5vw)) scale(.85) }
.hero .container .list .hide { transform: translateX(calc(min(480px, 72.5vw) * -2)) scale(.85) }
.hero .container .list .new-next { transform: translateX(calc(min(480px, 72.5vw) * 2)) scale(.85) }

.hero .container .list .hide,
.hero .container .list .new-next {
  opacity: 0;
  transition: opacity .5s, transform .5s
}

[categories] {
  width: 100%;
  display: flex;
  justify-content: center
}

[categories] .container { padding: 0 0 0 30px }

[categories] .container .wrapper {
  gap: 10px;
  width: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center
}

[categories] .container .wrapper h1 {
  font-weight: 500;
  color: var(--bg-paper);
  font-size: var(--size40-8-25)
}

[categories] .container .wrapper .divider {
  display: grid;
  grid-template-columns: repeat(12, 1fr)
}

[categories] .container .wrapper .divider div:first-child,
[categories] .container .wrapper .divider .div:last-child { height: 5px }

[categories] .container .wrapper .divider div:first-child {
  grid-column: span 2;
  background-color: var(--ternary)
}

[categories] .container .wrapper .divider div:last-child {
  grid-column: span 10;
  background-color: var(--secondary)
}

[categories] .container .wrapper .slider {
  gap: 30px;
  cursor: grab;
  display: flex;
  width: max-content;
  position: relative;
  padding: 30px 0 8px
}

[categories] .container .wrapper .slider .slide {
  width: 250px;
  height: 300px;
  display: flex;
  overflow: hidden;
  position: relative;
  text-align: center;
  align-items: center;
  border-radius: 16px;
  flex-direction: column;
  transition: var(--transition);
  justify-content: space-between;
  background-color: var(--bg-paper)
}

[categories] .container .wrapper .slider .slide .banner {
  width: 100%;
  height: 160px;
  position: relative;
  border-radius: 16px;
  background-size: cover;
  background-position: center
}

[categories] .container .wrapper .slider .slide .shop-cart {
  width: 50px;
  right: 16px;
  height: 50px;
  top: calc(160px - 25px)
}

[categories] .container .wrapper .slider .slide .shop-cart .btn-cart {
  width: 40px;
  height: 40px;
}

[categories] .container .wrapper .slider .slide .shop-cart .btn-cart i { font-size: 20px }
[categories] .container .wrapper .slider .slide .shop-cart .active i { color: var(--bg-paper) }

[categories] .container .wrapper .slider .slide h5 {
  font-weight: 700;
  line-height: 18.75px;
  color: var(--bg-paper);
  font-size: var(--size15-4)
}

[categories] .container .wrapper .slider .slide .event-info {
  width: 100%;
  height: 140px;
  display: flex;
  position: relative;
  box-sizing: border-box;
  flex-direction: column;
  padding: var(--size16-3);
  justify-content: space-between
}

[categories] .container .wrapper .slider .slide .event-info .description {
  width: 100%;
  display: flex;
  flex-direction: column
}

[categories] .container .wrapper .slider .slide .event-info .description .title {
  gap: 8px;
  width: 100%;
  display: flex;
  position: relative;
  align-items: start;
  flex-direction: column
}

[categories] .container .wrapper .slider .slide .event-info .description .title h5 {
  font-size: 15px;
  line-height: 14.06px;
  color: var(--secondary)
}

[categories] .container .wrapper .slider .slide .event-info .description .title h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 18.75px
}

[categories] .container .wrapper .slider .slide .event-info .info {
  width: 100%;
  display: grid;
  grid-gap: 10px;
  max-height: 62px;
  grid-template-rows: 62px;
  grid-template-columns: 60px 1fr
}

[categories] .container .wrapper .slider .slide .event-info .info .event-date {
  width: 100%;
  grid-row: 1;
  height: 100%;
  display: flex;
  grid-column: 1;
  overflow: hidden;
  grid-area: auto;
  border-radius: 8px;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--bg-paper)
}

[categories] .container .wrapper .slider .slide .event-info .info .event-date .week {
  font-size: 10px;
  color: var(--bg-default);
  text-transform: uppercase
}

[categories] .container .wrapper .slider .slide .event-info .info .event-date .day {
  font-size: 20px;
  font-weight: 900;
  color: var(--bg-default)
}

[categories] .container .wrapper .slider .slide .event-info .info .event-date .month {
  width: 100%;
  display: flex;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  align-items: center;
  color: var(--bg-paper);
  justify-content: center;
  text-transform: uppercase;
  background-color: var(--secondary)
}

[categories] .container .wrapper .slider .slide .event-info .info .event-address {
  width: 100%;
  grid-row: 1;
  display: grid;
  grid-column: 2;
  align-items: center;
  grid-template-columns: 1fr 24px;
  grid-template-rows: 21px 30px 11px
}

[categories] .container .wrapper .slider .slide .event-info .info .event-address .networks {
  grid-row: 1;
  width: 100%;
  height: 21px;
  align-items: center;
  grid-column: span 2;
  justify-content: center
}

[categories] .container .wrapper .slider .slide .event-info .info .event-address .networks a.btn {
  width: 16px;
  height: 16px;
  padding: .75em;
  font-size: 14px;
  box-sizing: border-box
}

[categories] .container .wrapper .slider .slide .event-info .info .event-address .text {
  width: 100%;
  grid-row: 2;
  color: inherit;
  grid-column: 1;
  font-size: 14px;
  font-weight: 500;

}

[categories] .container .wrapper .slider .slide .event-info .info .event-address .sponsored {
  width: 100%;
  grid-row: 3;
  grid-column: 1;
  font-size: 11px;
}

[categories] .container .wrapper .slider .slide .event-info .info .more {
  grid-row: 1;
  height: 100%;
  grid-column: 2;
  align-items: flex-end;
}

[categories] .container .wrapper .slider .slide .more .more-info {
  width: 0;
  height: 0;
  transform: translate(10%, 48%) scale(0)
}

[categories] .container .wrapper .slider .slide .more.active .more-info {
  width: 200px;
  height: 268px;
  transform: translate(-45%, 0%) scale(1);
}

.categories[categories] .container .wrapper .slider .slide {
  gap: 20px;
  width: 100px;
  height: 160px;
  justify-content: flex-start;
  background-color: transparent
}

.categories[categories] .container .wrapper .slider .slide .banner {
  height: 100px;
  border-radius: 0 0 10px 10px
}

.best-city[categories] .container .wrapper .slider .slide {
  width: 200px;
  height: 270px;
}

.best-city[categories] .container .wrapper .slider .slide .banner {
  width: 100%;
  height: 100%;
  transition: .75s all;
}

.best-city[categories] .container .wrapper .slider .slide h5 {
  left: 0;
  bottom: 0;
  min-width: 100%;
  position: absolute;
  text-align: center;
  color: var(--bg-paper);
  padding: var(--size16-3) 0;
  background: linear-gradient(var(--gradient))
}

.categories[categories] .container .wrapper .slider .slide a,
.best-city[categories] .container .wrapper .slider .slide a {
  width: 100%;
  transition: var(--transition)
}


/* CHANGE COLOR */
/* Primary */
.primary .hero .container .swipe .logo svg path { fill: var(--primary) }

/* Secundary */
.secondary .hero .container .swipe .logo svg path { fill: var(--secondary) }

/* Ternary */
.ternary .hero .container .swipe .logo svg path { fill: var(--ternary) }



/* CONTOLLER HOVER FOR DESKTOP */
.desktop .networks-product a:hover,
.desktop .networks a:hover {
  text-shadow: none !important;
  box-shadow: var(--shadow0005-secondary),
              var(--shadow0010-secondary),
              var(--shadow0015-secondary),
              var(--shadow0020-secondary)
}

.desktop .shop-cart .btn-cart:hover {
  background-color: var(--secondary);
  box-shadow: var(--shadow0005-secondary),
              var(--shadow0010-secondary),
              var(--shadow0015-secondary),
              var(--shadow0020-secondary)
}

.desktop .shop-cart .btn-cart:hover i,
.hero .container .list li .content .shop-cart .btn-cart.active i { color: var(--text-primary) }

.desktop .voucher .description .info .content .place .stages .stage .btn-action:hover {
  box-shadow: var(--shadow0005-secondary),
              var(--shadow0010-secondary),
              var(--shadow0015-secondary)
}

.desktop .hero .container .list .act .end-slide .rating i:hover {
  font-size: var(--size30-5);
  font-variation-settings: 'FILL' 1
}

.desktop .hero .container .list .act .end-slide .rating i:hover ~ i { font-variation-settings: 'FILL' 1 }

.desktop .best-city[categories] .container .wrapper .slider .slide .banner:hover { transform: scale(1.2) }

/* Primary */
.desktop.primary [categories] .container .wrapper .slider a:hover {
  text-shadow: 0 0 05px var(--primary),
               0 0 10px var(--primary),
               0 0 15px var(--primary)
}

/* Secondary */
.desktop.secondary [categories] .container .wrapper .slider a:hover {
  text-shadow: 0 0 05px var(--secondary),
               0 0 10px var(--secondary),
               0 0 15px var(--secondary)
}

/* Ternary */
.desktop.ternary [categories] .container .wrapper .slider a:hover {
  text-shadow: 0 0 05px var(--ternary),
               0 0 10px var(--ternary),
               0 0 15px var(--ternary)
}


/* RESPONSIVE */
@media screen and (min-width: 541px) {
  .hero .container .swipe { height: 75vh }
  .hero .container .list li .content .end-slide .more .more-info { transform: translate(62.5%, 49.05%) scale(0) }
  .hero .container .list li .content .end-slide .more.active .more-info { transform: translate(5.75%, -1.05%) scale(1) }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) and (max-height: 820px) {
  .hero .container .swipe { height: 75vh }
  .hero .container .list .logo {
    width: 100px;
    height: 100px;
  }

  .hero .container .list li {
    max-width: 350px;
    left: calc(50% + 63px)
  }

  .hero .container .list li .content {
    grid-template-rows: calc(82% - 32px) 1fr;
  }
  
  .hero .container .list .prev { transform: translateX(-350px) scale(.85) }
  .hero .container .list .next { transform: translateX(350px) scale(.85) }
  .hero .container .list .hide { transform: translateX(-700px) scale(.85) }
  .hero .container .list .new-next { transform: translateX(700px) scale(.85) }

  .hero .container .list li .content .shop-cart {
    left: 16px;
    top: calc(82% - 32px - ((var(--size80-15)) / 2))
  }

  .hero .container .list li .content .end-slide { padding: 16px }
  
  .hero .container .list li .content .end-slide .more .more-info { transform: translate(48%, 51.25%) scale(0) }
  .hero .container .list li .content .end-slide .more.active .more-info { transform: translate(2.25%, 1.25%) scale(1) }
}