@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;700&display=swap');

:root {
    --gray: #303036;
    --gray-light: #828286;
    --white: #fffaff;
    --green: #7be0ad;
    --green-05: #7be0adbb;
    --red: #c98986;
    --red-05: #c98986bb;
    --blue: #2758a3;
    --blue-05: #2758a3bb;
    --typeface: 'Titillium Web', sans-serif;
}


body {
    padding: 0;
    margin: 0;
    background-color: var(--gray);
    color: var(--white);
    display: flex;
    font-family: var(--typeface);
}

a {
    text-decoration: none;
}

h3 {
    -webkit-text-stroke: 2px var(--gray);
    -webkit-text-fill-color: var(--white);
}

.content {
    margin: 20px auto;
    display: grid;
    grid-template-rows: auto 1fr 1fr 1fr;
    grid-template-columns: 1fr;
    grid-template-areas: "schedule" "buns" "blunders" "other";
    gap: 20px;
    width: 700px;
    max-width: 100%;
}

@media(min-width: 768px) {
    .content {
        grid-template-rows: auto 2fr auto;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "schedule schedule" "buns blunders" "other other";
        width: 90%;
        max-width: 1080;
    }
}

@media(min-width: 1080px) {
    .content {
        width: 960px;
    }
}

.group {
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
}

.group__content {
    display: flex;
    height: 100%;
    background-color: #00000000;
    transition: background-color 0.2s ease-in-out;
    padding: 40px;
    box-sizing: border-box;
}

.group__title {
    margin: auto;
    font-size: 3rem;
    transition: transform 0.2s ease-in-out;
    pointer-events: none;
}

.buns {
    grid-area: buns;
    background-color: var(--green);
    background: url("assets/buns.gif") no-repeat;
    background-size: cover;
    background-position: center;
}

.blunders {
    grid-area: blunders;
    background: url("assets/blunders.gif") no-repeat;
    background-size: cover;
    background-position: center;
}

.blunders:hover > .group__content {
    background: var(--blue-05);
}

.buns:hover > .group__content {
    background: var(--green-05);
}

.group:hover .group__title {
    transform: scale(1.05);
}

.other {
    cursor: not-allowed;
    grid-area: other;
    background-color: var(--gray-light);
}

.other h3 {
    font-size: 2.4rem;
}

.other:hover > .group__content {
    background: var(--red-05);
}

.schedule {
    cursor: unset;
    background: var(--gray-light);
    padding: 20px;
    display: flex;
    flex-direction: column;
    grid-area: schedule;
}

.schedule__title {
    font-size: 2.4rem;
    margin: 0 auto 0 0;
}

.schedule__list {
    padding: 0;
    list-style: none;
}