:root {
    
    /* Primary */

    --purple-600: hsl(246, 80%, 60%);

    --orange-300-work: hsl(15, 100%, 70%);
    --blue-300-play: hsl(195, 74%, 62%);
    --pink-400-study: hsl(348, 100%, 68%);
    --green-400-exercise: hsl(145, 58%, 55%);
    --purple-700-social: hsl(264, 64%, 52%);
    --yellow-300-selfcare: hsl(43, 84%, 65%);

    /* Neutral */

    --navy-950: hsl(226, 43%, 10%);
    --navy-900: hsl(235, 46%, 20%);
    --purple-500: hsl(235, 45%, 61%);
    --navy-200: hsl(236, 100%, 87%);
    --white: hsl(180, 0%, 100%);

    /* Typography */

    --text-size-1: 3.5rem;
    --text-size-2: 2.5rem;
    --text-size-3: 2rem;
    --text-size-4: 1.5rem;
    --text-size-5: 1.125rem;
    --text-size-6: 0.938rem;

    /*Font weights*/

    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;

}

*,*::before,*::after {
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.15;
    font-family: rubik;
}

img {
    display: block;
}

button {
    font-family: inherit;
    border: 0;
    padding: 0;
    cursor: pointer;
    background-color: var(--navy-900);
    color: var(--white);
}

body {
    background-color: var(--navy-950);
}

.grid {
    border: 1px solid black;
    border-radius: 0.9375rem;
    overflow: hidden;
}


.container {
    display: grid;
    grid-template-columns: 20.438rem;
    grid-template-rows: 12.688rem repeat(6, 10rem);
    place-content: center;
    grid-row-gap: 1.5rem;
    margin-top: 81px;
    margin-bottom: 81px;
}

.owner__top {
    background-color: var(--purple-600);
    border-radius: 0.9375rem;
    height: 8.3125rem;
}

.owner__flex {
    display: flex;
    width: 16rem;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 2.31rem 1.14rem;
}


span {
    font-weight: var(--fw-400);
    font-size: var(--text-size-6);
    color: var(--navy-200);
    margin-bottom: 2rem;
}

h1 {
    font-size: var(--text-size-4);
    font-weight: var(--fw-300);
}

.owner__bottom {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 1.5rem;
}

button {
    color: var(--purple-500);
    font-weight: var(--fw-400);
    font-size: var(--text-size-5);
}

button:hover {
    color: var(--white);
}

.info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 2rem 1.5rem;
}

.time {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 2rem 1.5rem;
}

.ellipsis {
    width: 1.3125rem;
    height: 0.3125rem;
}


.card-1 {
    background-color: var(--navy-900);
    color: var(--white);
}

.jeremy {
    width: 5rem;
}

.card-2 {
    background-color: var(--orange-300-work);
    color: var(--white);
}

.card-3 {
    background-color: var(--blue-300-play);
    color: var(--white);
}

.card-4 {
    background-color: var(--pink-400-study);
    color: var(--white);
}

.card-5 {
    background-color: var(--green-400-exercise);
    color: var(--white);
}

.card-6 {
    background-color: var(--purple-700-social);
    color: var(--white);
}

.card-7 {
    background-color: var(--yellow-300-selfcare);
    color: var(--white);
}

.work__bottom,
.play__bottom,
.study__bottom,
.exercise__bottom,
.social__bottom,
.self__care__bottom {
    background-color: var(--navy-900);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 7.625rem;
    border-radius: 0.9375rem;
}




@media screen and (min-width: 690px) {

    .container {
        display: grid;
        grid-template-columns: repeat(3, 11.75rem);
        grid-template-rows: repeat(3, 11.25rem);
        gap: 1.5rem;
        margin: 173px 78px 174px;
    }

    .card-1 {
        grid-column: 1 / 4;
    }
}

@media screen and (min-width: 1278px) {

    .container {
        display: grid;
        grid-template-columns: repeat(4, 15.9375rem);
        grid-template-rows: repeat(2, 12.4375rem);
    }

    .card-1 {
        grid-column: 1;
        grid-row: 1 / 3;
    }


}