:root {
    --grey100:      #E7EAEE;
    --grey200:      #CFCFCF;
    --grey400:      #676D7E;
    --grey500:      #48556A;

    --purple50:     #EDE4FF;
    --purple300:    #A775F1;
    --purple500:    #733FC8;

    --black:        #121212;
    --darkBlue:     #19202D;
    --white:        #FFFFFF;
}

html {
    font-size: 62.5%; /* 10 pixels = 1rem */
    box-sizing: border-box; /* Makes padding and border included in the element's width/height */
    height: 100%; /* Ensures the HTML element takes up the full viewport height */
}

/* Applies the following styles to every single element on the page */
*, *::before, *::after {
    margin: 0; /* Removes the margin */
    padding: 0; /* Removes the padding */
    box-sizing: border-box; /* Sets the box model, so that padding and border are included in the element's width/height */
}

body {
    font-family: "Barlow Semi Condensed", sans-serif;
    background-color: #F6F5F6;
    min-height: 100vh; /* Ensures the body takes up at least the full height of the viewport */
    display: flex;
    justify-content: center; /* Horizontally centers the content */
    align-items: center; /* Vertically centers the content */
    margin: 0;
}

.content {
    display: grid;
    gap: 3.2rem;
    width: 81.3%;
    margin: 0 auto;
}

/* Media Query for Tablets */
@media screen and (min-width: 768px) {
    .content {
        grid-template-columns: repeat(2, 1fr); /* Sets the grid layout with 2 equally-sized columns */
    }
}

/* Media Query for Desktop */
@media screen and (min-width: 1440px) {
    .content {
        grid-template-columns: repeat(4, 1fr); /* Sets the grid layout with 4 equally-sized columns */
    }
}

.section {
    padding: 3.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    border-radius: .8rem;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.section-01 {
    background-color: var(--purple500);
}

/* Media Query for Tablets */
@media screen and (min-width: 768px) {
    .section-01 {
        grid-column: 1 / span 2; /* Positions the item starting at grid line 1 and makes it span across 2 columns */
    }
}

.section-02 {
    background-color: var(--grey500);
}

.section-03 {
    background-color: var(--white);
}

/* Media Query for Desktop */
@media screen and (min-width: 1440px) {
    .section-03 {
        grid-row: 2; /* Positions the item to start on the second horizontal grid line */
    }
}

.section-04 {
    background-color: var(--darkBlue);
}

/* Media Query for Tablets */
@media screen and (min-width: 768px) {
    .section-04 {
        grid-column: 1 / span 2; /* Positions the item starting at grid line 1 and makes it span across 2 columns */
    }
}

/* Media Query for Desktop */
@media screen and (min-width: 1440px) {
    .section-04 {
        grid-row: 2;                /* Positions the item to start on the second horizontal grid line */
        grid-column: 2 / span 2;    /* Positions the item starting at grid line 2 and makes it span across 2 columns */
    }
}

.section-05 {
    background-color: var(--white);
}

/* Media Query for Tablets */
@media screen and (min-width: 768px) {
    .section-05 {
        grid-column: 1 / span 2; /* Positions the item starting at grid line 1 and makes it span across 2 columns */
    }
}

/* Media Query for Desktop */
@media screen and (min-width: 1440px) {
    .section-05 {
        grid-column: 4;         /* Positions the item to start on the fourth vertical grid line */
        grid-row: 1 / span 2;   /* Positions the item starting at grid line 1 and makes it span across 2 rows */
    }
}

.profile {
    display: flex;
    gap: 1.7rem;
}

.image-fluid {
    border: .4rem solid var(--purple300);
    border-radius: 100%;
    width: 2.8rem;
    height: 2.8rem;
    overflow: hidden; /* Clips content that exceeds the element's height or width, making it invisible and preventing scrollbars */
}

.image-fluid-02,
.image-fluid-03,
.image-fluid-05 {
    border: none;
}

.image-fluid img,
.image-fluid source {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resizes the content to fill the element's container, cropping the content if necessary to maintain its aspect ratio */
}

.person {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.name {
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 110%;
    color: var(--white);
}

.name-03 {
    color: var(--grey500);
    line-height: 130%;
}

.name-05 {
    color: var(--grey500);
    line-height: 130%;
}

.graduate {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 110%;
    color: var(--purple50);
}

.graduate-02 {
    color: var(--purple300);
}

.graduate-03 {
    color: var(--grey400);
}

.graduate-04 {
    color: var(--white);
}

.graduate-05 {
    color: var(--grey500);
}

.quote {
    font-size: 2rem;
    font-weight: 600;
    line-height: 120%;
    color: var(--white);
}

.quote-03 {
    color: var(--grey500);
}

.quote-04 {
    color: var(--grey200);
}

.quote-05 {
    color: var(--grey500);
}

.description {
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 140%;
    color: var(--purple50);
}

.description-02 {
    color: var(--grey100);
}

.description-03 {
    color: var(--grey400);
}

.description-04 {
    color: var(--grey100);
}

.description-05 {
    color: var(--grey400);
}