/* Mobile first Design */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-size: 13px;
}

/* reusuable styles */

:root {
    /* primary */
    --purple-50: hsl(260, 100%, 95%);
    --purple-300: hsl(264, 82%, 80%);
    --purple-400: hsl(264, 82%, 70%);
    --purple-500: hsl(263, 55%, 52%);

    /* neutral */
    --white: hsl(0, 0%, 100%);
    --grey-50: hsl(300, 5%, 96%);
    --grey-100: hsl(214, 17%, 92%);
    --grey-200: hsl(0, 0%, 81%);
    --grey-300: hsl(215, 10%, 67%);
    --grey-400: hsl(224, 10%, 45%);
    --grey-500: hsl(217, 19%, 35%);
    --dark-blue: hsl(219, 29%, 14%);
    --orange: hsl(28, 90%, 60%);
    --black: hsl(0, 0%, 7%);

    /* typography */

    --text-preset-1: 600 20px/1.2 "Barlow Semi Condensed", sans-serif;
    --text-preset-2: 500 13px/1.1 "Barlow Semi Condensed", sans-serif;
    --text-preset-3: 500 13px/1.4 "Barlow Semi Condensed", sans-serif;
    --text-preset-4: 500 11px/1.1 "Barlow Semi Condensed", sans-serif;
    --default-letter-spacing: 0px;

    /* spacing */


    /* 1440px  - gridWrapper spacing */

    --spacing-2000: 229px;
    --spacing-1950: 218px;
    --spacing-1550: 165px;
    --spacing-1500: 161px;

    --spacing-1050: 113px;
    --spacing-850: 83px;
    --spacing-750: 73px;
    --spacing-600: 60px;
    --spacing-500: 40px;
    --spacing-420: 35px;
    --spacing-400: 32px;
    --spacing-300: 24px;
    --spacing-210: 17px;
    --spacing-200: 16px;
    --spacing-100: 8px;
    --spacing-50: 4px;
    
}

/* background colour */

html, body {
    background-color: var(--grey-50);
}

/* grid styles */

.gridWrapper {
    display: grid;
    grid-template-columns: 1fr;

    margin: var(--spacing-750) var(--spacing-420);

}

.gridContainer {
    width: 100%;
    padding: var(--spacing-400);
    border-radius: var(--spacing-100);

    margin-bottom: var(--spacing-400);
}

/* author container */
.authorContainer {
    display: flex;
}

.authorImage {
    border-radius: 50%;
    width: 28px;
    margin-right: var(--spacing-210);
}

.authorName {
    font: var(--text-preset-2);
}
.authorVerified {
    font: var(--text-preset-4);
}

/* grid item content styles */

.bigQuote {
    font: var(--text-preset-1);
    padding: var(--spacing-200) 0;
}

.smallQuote {
    font: var(--text-preset-3);
}

/* item $ | styles */

/* item-1 */
.item-1 {
    background-color: var(--purple-500);
    color: var(--white);   
}

.imageDaniel, .imagePatrick{
    border: 2px solid var(--purple-400);
}

.gridWrapper > section:nth-of-type(1) .authorVerified, .gridWrapper > section:nth-of-type(1) .smallQuote {
    color: var(--purple-50);
}

/* item-2 */

.item-2 {
    background-color: var(--grey-500);
    color: var(--white);   
}

.gridWrapper > section:nth-of-type(2) .authorVerified {
    color: var(--grey-300);
}


.gridWrapper > section:nth-of-type(2) .smallQuote {
    color: var(--grey-100);
}

/* item-3 */

.item-3 {
    background-color: var(--white);
    color: var(--grey-500);   
}

.gridWrapper > section:nth-of-type(3) .authorVerified, .gridWrapper > section:nth-of-type(3) .smallQuote {
    color: var(--grey-400);
}

/* item-4 */

.item-4 {
    background-color: var(--dark-blue);
    color: var(--grey-200);   
}

.gridWrapper > section:nth-of-type(4) :is(h3, h3 + p) {
    color: var(--white);
}

.gridWrapper > section:nth-of-type(4) .smallQuote{
    color: var(--grey-100);
}

/* item 5 */

.item-5 {
    background-color: var(--white);
    color: var(--grey-500);   
}

.gridWrapper > section:nth-of-type(5) .authorVerified{
    color: var(--grey-300);
}

.gridWrapper > section:nth-of-type(5) .smallQuote{
    color: var(--grey-400);
}

/* attribution */

.attribution {
    display: none;
}


/* Tablet */
@media (min-width: 768px) {


/* grid styles */

.gridWrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: var(--spacing-400);

    margin: var(--spacing-850) var(--spacing-600) var(--spacing-1050) var(--spacing-600);
}

.gridContainer {
    box-shadow: 40px 60px 50px -47px rgba(72,85,106, 0.2474);

    margin-bottom: 0;
}

/* grid Container positions */

.item-1, .item-4, .item-5 {
    grid-column: 1 / 3;
}

.item-1 {
    grid-row: 1 / 2;
    /* item 1 quotation mark */

    background-image: url(./images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: 69%;
}

.item-4 {
    grid-row: 3 / 4;
}

.item-5 {
    grid-row: 4 / 5;
}

/* attribution */

.attribution { 
    display: block;
    font: var(--text-preset-1);

    font-size: 11px; text-align: center;
    position: absolute;
    top: var(--spacing-200);
    left: 50%;
    transform: translatex(-50%); 
}
.attribution a { 
    color: hsl(228, 45%, 44%);
}

.attribution a:hover {
    color: var(--orange);
}

}


/* Desktop */

@media (min-width: 1440px) {


.gridWrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);

    gap: var(--spacing-300) var(--spacing-400);
    min-height: 582px;

    margin: var(--spacing-2000) var(--spacing-1500) var(--spacing-1950) var(--spacing-1500);
}


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

.item-2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}


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

.item-4 {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
}
.item-5 {
    grid-column: 4 / 5;
    grid-row: 1 / 3;
}

}