@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text&display=swap');
:root {
    --accent: #3DB54E;
    --dark: #17191D;
    --light: #f4f4f4;
    --overlay: rgba(23, 25, 29, 0.8);
    --ease: all 0.3s ease 0s;
}


body {
    background-color: var(--dark);
}

p,
button,
h1,
h4 {
    color: var(--light);
}



button {
    cursor: pointer;
    transition: var(--ease);
}

button:hover {
    transform: scale(1.4);
}

.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "top_section" "content_section";
}

.top_section {
    grid-area: top_section;
    min-height: 370px;
    display: grid;
    grid-template-columns: 10% 1fr 10%;
    grid-template-areas: ". header .";
    background: url('images/img3.jpg');
    background: linear-gradient(var(--overlay), var(--overlay));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}








header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

header p {
    max-width: 570px;
    margin-bottom: 30px;
}

header button {
    width: 131px;
    padding: 12px 0;
    background-color: var(--accent);
    border: none;
}

.content_section {
    grid-area: content_section;
    display: grid;
    grid-template-columns: 10% 1fr 10%;
    grid-template-areas: ". playlist_one .";
    margin-bottom: 60px;
}

.playlist_one {
    grid-area: playlist_one;
}

.playlist_title {
    margin: 30px 0;
}

.videos {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
}

.video {
    height: 150px;
    grid-column-start: span 3;
    position: relative;
    transition: var(--ease);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.video:hover {
    transform: scale(1.03);
}

.video i {
    cursor: pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 60px;
    transform: translate(-50%, -50%);
    color: red;
    opacity: 0.85;
    transition: var(--ease);
}

.video:hover {
    opacity: 1;
}

@media only screen and (max-width:1200px) {
    .video {
        grid-column-start: span 6;
        height: 240px;
    }
}

@media only screen and (max-width:800px) {
    .video {
        grid-column-start: span 12;
    }
}