@import url('COH3.css');
@media (max-width: 1024px) {
    .section-first .container, .section-second .container, .section-third .container, .section-fourth .container {
        font-size: 1.75vw;
    }
}
@media (max-width: 768px) {
    header article {
        width: 80%;
        padding: 5% 0;
    }
    .section-first .container, .section-second .container, .section-third .container, .section-fourth .container {
        font-size: 2.4vw;
    }
    .section-second .container p, .section-third h2 + p {
        font-size: 125%;
    }
    .section-second .container {
        width: 100%;
        margin: 0 auto 90%;
    }
    .section-second figcaption {
        line-height: normal;
        margin: 8% 0 0;
    }
    .section-second dl dt ul.row {
        margin: 0 -15px 5%;
        font-size: 2.8vw;
    }
    .section-second dl dd figure {
        max-width: 80%;
    }
    .section-third ul.row li:first-of-type {
        margin: 0 auto 25px;
    }
    .section-fourth ul.row li {
        margin: 0 auto 25px;
    }
    .section-fourth {
        padding: 5% 0;
    }
    .section-fourth ul.row {
        margin: 0 auto;
        max-width: 420px;
    }
    .section-first .container, .section-second .container, .section-third .container, .section-fourth .container {
        font-size: 2.4vw;
    }
    .section-fourth ul.row li article div {
        padding: 15px;
    }
    a.twitch_icon svg {
        fill: #9147ff;
    }
    a.twitter_icon svg {
        fill: #1d9bf0
    }
	a.youtube_icon svg {
		fill:#ff3d3d
	}
	a.tiktok_icon svg {
		fill:#66c3c9
	}
}
@media (max-width: 480px) {
    .social {
        margin: 0 auto;
        width: 260px;
    }
    .social a {
        margin: 0 10px 10px;
    }
}
@media (min-width: 768px) {
    header {
        background-size: cover;
        padding: 0 0 1.5%;
    }
    header:before {
        top: -14%;
        background-size: contain;
        height: 36%;
    }
    header article {
        width: 100%;
        max-width: 50%;
        margin: 2.3% auto;
    }
    header nav {
        padding: 1.5vw 1.5vw 4.5%;
    }
    header nav a.SEGA {
        max-width: 9%
    }
    header nav a.AverMedia {
        max-width: 20%
    }
    .section-first {
        padding: 100px 0 70px !important;
    }
    .section-second {
        background-size: 100% auto;
        background-position: center 34%;
        padding: 50px 0;
    }
    .section-second:before {
        height: 29%;
        background-position: center bottom;
        background-size: cover;
        background-image: url(../img/Tear_C_BLANK_1.jpg);
        background-image: -webkit-image-set(url(../img/Tear_C_BLANK_1.webp) 1x);
    }
    .section-second dl {
        margin: 0 -15px;
    }
    .section-second dl dt, .section-second dl dd {
        padding: 0 15px;
    }
    .section-second dl dt {
        width: 60%;
    }
    .section-second dl dd {
        width: 40%;
    }
    .section-second:after {
        background-image: url(../img/Tear_C_BLANK.jpg);
        background-image: -webkit-image-set(url(../img/Tear_C_BLANK.webp) 1x);
        height: 34%;
    }
    .section-third ul.row {
        margin: 0 -25px;
    }
    .section-third ul.row li {
        width: calc(100% / 2);
        padding: 0 25px;
    }
    .section-fourth ul.row {
        margin: 0 -15px;
    }
    .section-fourth ul.row li {
        width: calc(100% / 3);
        padding: 0 15px;
    }
    .section-second article {
        width: 90%;
        max-width: 1024px;
    }
    .section-second .container {
        margin: 0 auto 70%;
    }
    .section-second img[alt="sega_avermedia"] {
        max-width: 70%;
        margin: 0 0 2.5%;
    }
    .section-third ul.row li div a {
        margin: 30px auto 0;
        max-width: 320px;
    }
    .section-third ul.row li div img[alt="Pre-orderNow"], .section-third ul.row li div img[alt="discover_more"] {
        max-width: 75%;
    }
    .section-fourth div.row figure img {
        max-width: 70%;
    }
    .section-fourth {
        background-image: url(../img/section-fourth.jpg);
        background-image: -webkit-image-set(url(../img/section-fourth.webp) 1x);
        background-size: 150% auto;
        padding: 70px 0;
    }
    .section-third article {
        max-width: none;
    }
    .section-fourth::after {
        content: "";
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(30vw + 70px);
        z-index: 2;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        background-image: url(../img/Tear_C_BLANK.jpg);
        background-image: -webkit-image-set(url(../img/Tear_C_BLANK.webp) 1x);
    }
    .social a:hover {
        transform: scale(1.05);
    }
    .join_ivestreaml a hover {
        transform: scale(1.1);
    }
    .join_ivestreaml a.twitch_icon:hover svg {
        fill: #9147ff;
    }
    .join_ivestreaml a.twitter_icon:hover svg {
        fill: #1d9bf0
    }
	    .join_ivestreaml a.youtube_icon:hover svg {
        fill: #ff0000
    }
		.join_ivestreaml a.tiktok_icon:hover svg {
		fill:#66c3c9
	}
	.section-fourth ul.row li article span {
	font-size: 100%;
}
}
@media (min-width: 1024px) {
    .sega-avermedia {
        margin: -2% auto 0;
        max-width: 40%;
    }
    .section-second {
        background-position: center 20%;
    }
    .section-second:before {
        height: 370px;
    }
}
@media (min-width: 1010px) {
 	.section-fourth ul.row li article span {
	font-size: 110%;
}
}
@media (min-width: 1200px) {
    .section-fourth::after {
        height: 450px;
    }
}
@media (min-width: 1224px) {
    .section-second:before {
        height: 380px;
    }
}