.cont-megazone-games {
overflow: hidden;
padding-left: 60%;
position: relative;
}
.games-motion-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.cont-megazone-games span.barspurple {
right: 2.5%;
bottom: 3%;
z-index: 20;
}
.cont-megazone-games span.purple-line {
left: 2.5%;
bottom: 3%;
z-index: 20;
}
.megazone-infos {
z-index: 10;
padding-top: 30%;
padding-left: 2em;
position: relative;
padding-bottom: 20%;
} .megazone-infos-titles {
position: relative;
}
.megazone-infos-titles h2 {
color: #FFFFFF;
font-size: 2vw;
font-weight: 300;
line-height: 1vw;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 0!important;
font-family: "Jost", Sans-serif;
}
.megazone-infos-titles h3 {
font-size: 5.1vw;
font-weight: bold;
margin-left: -6px;
line-height: 5.5vw;
letter-spacing: -1px;
text-transform: uppercase;
margin-bottom: 0!important;
font-family: "Jost", Sans-serif;
color: var( --e-global-color-accent );
}
.items-game {
gap: 2em;
display: grid;
padding-right: 20%;
grid-template-columns: repeat(3,1fr);
}
.item-game h4 {
color: #ffffff;
font-size: 35px;
font-weight: 500;
line-height: 30px;
text-transform: uppercase;
margin-bottom: 0!important;
font-family: "Teko", Sans-serif;
}
.item-game .item-img {
margin-bottom: 1em;
}
.megazone-games-link {
margin: 2em 0;
}
.megazone-games-link a {
font-size: 22px;
font-weight: 400;
position: relative;
letter-spacing: 1.1px;
padding: 0.4em 0;
color: #ffffff!important;
text-transform: uppercase;
text-decoration: none!important;
font-family: "Teko", Sans-serif;
}
.megazone-games-link a::after {
left: 0;
z-index: 0;
content: "";
width: 100%;
height: 54px;
opacity: 0.3;
position: absolute;
filter: blur(21px);
background: var( --e-global-color-accent );
}
.megazone-games-link a > span {
z-index: 9;
position: relative;
padding: 0.4em 1.5em;
transition: 0.3s linear;
background-color: var( --e-global-color-accent );
clip-path: polygon(5% 0%, 100% 0, 100% 70%, 95% 100%, 0 100%, 0% 30%)!important;
}
.megazone-games-link a > span > span {
z-index: 10;
position: relative;
}
.megazone-games-link a > span::before {
content: "";
top:-5%;
left:-1%;
bottom:-5%;
width: 0;
position: absolute;
transition: 0.3s ease-out;
background-color: var( --e-global-color-primary );
}
.megazone-games-link a:hover > span::before {
width:110%;
}  @media (max-width: 374px) {
.cont-megazone-games {
padding: 80% 5% 10%;
background-color: #000000;
}
.games-motion-bg {
height: 65%;
background-size: 198%;
background-position: 7% 13%;
}
.games-motion-bg:before {
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 20%;
position: absolute;
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%,rgba(0,0,0,1) 50%, rgba(0,0,0,1) 80%, rgba(0,0,0,1) 100%);
}
.megazone-infos:before,
.cont-megazone-games span.barspurple,
.cont-megazone-games span.purple-line {
display: none;
}
.megazone-infos {
padding: 0;
}
.megazone-games-link {
margin: 2em 0 0.5em 0;
}
.megazone-infos-titles h2 {
font-size: 4.5vw;
line-height: 1px;
letter-spacing: 0px;
}
.megazone-infos-titles h3 {
font-size: 12.5vw;
line-height: 14vw;
}
.items-game {
gap: 1em;
padding-right: 0;
}
.item-game h4 {
font-size: 22px;
line-height: 22px;
}
} @media (min-width: 375px) and (max-width: 767px) {
.cont-megazone-games {
padding: 80% 5% 10%;
background-color: #000000;
}
.games-motion-bg {
height: 65%;
background-size: 198%;
background-position: 7% 13%;
}
.games-motion-bg:before {
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 20%;
position: absolute;
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,0.02) 0%,rgba(0,0,0,1) 50%, rgba(0,0,0,1) 80%, rgba(0,0,0,1) 100%);
}
.megazone-infos:before,
.cont-megazone-games span.barspurple,
.cont-megazone-games span.purple-line {
display: none;
}
.megazone-infos {
padding: 0;
}
.megazone-games-link {
margin: 2em 0 0.5em 0;
}
.megazone-infos-titles h2 {
font-size: 5.5vw;
line-height: 1vw;
letter-spacing: 1px;
}
.megazone-infos-titles h3 {
font-size: 15vw;
line-height: 16vw;
}
.items-game {
gap: 1em;
padding-right: 0;
}
.item-game h4 {
font-size: 22px;
line-height: 22px;
}
} @media (min-width: 768px) and (max-width: 1024px) {
.cont-megazone-games span.purple-line {
width: 4em;
}
.cont-megazone-games {
padding-left: 40%;
}
.megazone-infos {
padding-top: 18%;
padding-bottom: 9%;
}
.megazone-infos-titles h2 {
font-size: 3vw;
line-height: 1vw;
}
.megazone-infos-titles h3 {
font-size: 8vw;
line-height: 8vw;
}
.items-game {
gap: 1.5em;
padding-right: 10%;
}
.item-game h4 {
font-size: 21px;
line-height: 22px;
}
.megazone-infos:after {
top: 0;
left: 0;
width: 1px;
height: 100%;
content: " ";
opacity: 0.2;
position: absolute;
background-color: #ffffff;
}
} @media (max-width: 1024px) {
.megazone-games-link a {
font-size: 16px;
padding: 0.5em 0;
}
.megazone-games-link a > span {
padding: 0.5em 1.5em;
}
} @media (min-width: 1025px) {
.megazone-infos:after,
.cont-megazone-games:after,
.cont-megazone-games:before {
top: 0;
width: 1px;
height: 100%;
content: " ";
opacity: 0.2;
z-index: 15;
position: absolute;
background-color: #ffffff;
}
.megazone-infos:after {
left: 0;
}
.cont-megazone-games:after {
left: 20%;
}
.cont-megazone-games:before {
right: 14%;
}
} @media (min-width: 1025px) and (max-width: 1700px) {
.cont-megazone-games span.purple-line {
width: 5em;
}
.megazone-infos {
padding-top: 18%;
padding-bottom: 9%;
}
.megazone-infos-titles h2 {
font-size: 1.8vw;
line-height: 0.8vw;
}
.megazone-infos-titles h3 {
font-size: 4.8vw;
line-height: 5vw;
}
.item-game h4 {
font-size: 21px;
line-height: 22px;
}
}