:root {
    --color-white: #FFFFFF;
    --color-dark-blue: #19202D;
    --color-black: #121212;
    --color-purple-500: #733FC8;
    --color-purple-300: #A775F1;
    --color-purple-50: #EDE4FF;
    --color-grey-500: #48556A;
    --color-grey-400: #676D7E;
    --color-grey-300: #A3AAB4;
    --color-grey-200: #CFCFCF;
    --color-grey-100: #E7EAEE;

    --padding-600: 73px;
    --padding-500: 35px;
    --padding-400: 32px;
    --padding-200: 16px;

}

@font-face {
    font-family: "BarlowSemiCondensed-Medium";
    src: url(fonts/BarlowSemiCondensed-Medium.ttf);
    font-weight: 500 600;
}

@font-face {
    font-family: "BarlowSemiCondensed-SemiBold";
    src: url(fonts/BarlowSemiCondensed-SemiBold.ttf);
    font-weight: 500 600;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#container {
    display: grid;
    grid-column: 1;
    width: 375px;
    padding: var(--padding-600) var(--padding-500);
    gap: var(--padding-400);
}

#grid-1 {
    width: 305px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--padding-400);
    gap: var(--padding-200);
    border-radius: 8px;
    background-color: var(--color-purple-500);
    box-shadow: 40px 60px 50px -47px rgba(72, 85, 106, 0.25);
}

#grid-1 figure {
    display: flex;
    gap: 17px;
    justify-content: center;
    align-items: flex-start;
}

#grid-1 img {
    width: 28px;
    height: 28px;
    border-radius: 28px;
    border: 2px solid var(--color-purple-300);
}

#grid-1 figcaption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

#grid-1 figcaption strong {
    color: var(--color-white);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}

#grid-1 figcaption span {
    color: var(--color-purple-50);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}

#grid-1 header h1 {
    color: var(--color-white);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-SemiBold", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
}

#grid-1 blockquote p {
    color: var(--color-purple-50);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

#grid-2 {
    width: 305px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--padding-400);
    gap: var(--padding-200);
    border-radius: 8px;
    background-color: var(--color-grey-500);
    box-shadow: 40px 60px 50px -47px rgba(72, 85, 106, 0.25);
}

#grid-2 figure {
    display: flex;
    gap: 17px;
    justify-content: center;
    align-items: flex-start;
}

#grid-2 img {
    width: 28px;
    height: 28px;
    border-radius: 28px;
}

#grid-2 figcaption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

#grid-2 figcaption strong {
    color: var(--color-white);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}

#grid-2 figcaption span {
    color: var(--color-grey-300);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}

#grid-2 header h3 {
    color: var(--color-white);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-SemiBold", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
}

#grid-2 blockquote p {
    color: var(--color-grey-100);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

#grid-3 {
    width: 305px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--padding-400);
    gap: var(--padding-200);
    border-radius: 8px;
    background-color: var(--color-white);
    box-shadow: 40px 60px 50px -47px rgba(72, 85, 106, 0.25);
}

#grid-3 figure {
    display: flex;
    gap: 17px;
    justify-content: center;
    align-items: flex-start;
}

#grid-3 img {
    width: 28px;
    height: 28px;
    border-radius: 28px;
}

#grid-3 figcaption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

#grid-3 figcaption strong {
    color: var(--color-grey-500);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}

#grid-3 figcaption span {
    color: var(--color-grey-400);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}

#grid-3 header h3 {
    color: var(--color-grey-500);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-SemiBold", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
}

#grid-3 blockquote p {
    color: var(--color-grey-400);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

#grid-4 {
    width: 305px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--padding-400);
    gap: var(--padding-200);
    border-radius: 8px;
    background-color: var(--color-dark-blue);
    box-shadow: 40px 60px 50px -47px rgba(72, 85, 106, 0.25);
}

#grid-4 figure {
    display: flex;
    gap: 17px;
    justify-content: center;
    align-items: flex-start;
}

#grid-4 img {
    width: 28px;
    height: 28px;
    border-radius: 28px;
    border: 2px solid var(--color-purple-500);
}

#grid-4 figcaption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

#grid-4 figcaption strong {
    color: var(--color-white);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}

#grid-4 figcaption span {
    color: var(--color-white);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}

#grid-4 header h3 {
    color: var(--color-grey-200);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-SemiBold", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
}

#grid-4 blockquote p {
    color: var(--color-grey-100);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

#grid-5 {
    width: 305px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    padding: var(--padding-400);
    gap: var(--padding-200);
    border-radius: 8px;
    background-color: var(--color-white);
    box-shadow: 40px 60px 50px -47px rgba(72, 85, 106, 0.25);
}

#grid-5 figure {
    display: flex;
    gap: 17px;
    justify-content: center;
    align-items: flex-start;
}

#grid-5 img {
    width: 28px;
    height: 28px;
    border-radius: 28px;
}

#grid-5 figcaption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

#grid-5 figcaption strong {
    color: var(--color-grey-500);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}

#grid-5 figcaption span {
    color: var(--color-grey-300);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}

#grid-5 header h3 {
    color: var(--color-grey-500);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-SemiBold", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
}

#grid-5 blockquote p {
    color: var(--color-grey-400);
    align-self: stretch;
    font-family: "BarlowSemiCondensed-Medium", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}



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

    #cotainer {
        display: grid;
        grid-column: 2;
        min-width: 768px;
        display: flex;
        padding: 83px 61px 113px 60px;
        align-items: center;

    }

    #grid-1, #grid-4, #grid-5{
        grid-column: 1 / span 2;
        width: 647px;
    }

    #grid-2, #grid-3 {
        width: 307.5px;
    }

}

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

    #cotainer {
        display: grid;
        grid-column: 4;
        grid-row: 2;
        min-width: 1024px;
        padding: 299px 161px 218px 165px;
        justify-content: flex-end;
        align-items: center;

    }

    #grid-1 {
        grid-column: 1 /span 2;
        grid-row: 1;
        width: 540px;
    }

    #grid-2 {
        grid-column: 3;
        grid-row: 1;
        width: 255px;
    }

    #grid-3 {
        grid-column: 1;
        grid-row: 2;
        width: 255px;
    }

    #grid-4 {
        grid-column: 2 /span 3;
        grid-row: 2;
        width: 540px;
    }

    #grid-5 {
        grid-column: 4;
        grid-row: 1 / span 2;
        width: 255px;

    }
}