@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap');

:root{

    /* Primary Colors */
    --red-color: hsl(0, 78%, 62%);
    --cyan-color: hsl(180, 62%, 55%);
    --orange-color: hsl(34, 97%, 64%);
    --blue-color: hsl(212, 86%, 64%);

    /* Neutral Colors */
    --grey-color-500: hsl(234, 12%, 34%);
    --grey-color-400: hsl(212, 6%, 44%);
    --white-color: hsl(0, 0%, 100%);

    /* body Font Sizes (Typography)*/
    --fluid-11-13: clamp(0.6875rem, 0.644rem + 0.2174vw, 0.8125rem);
    --fluid-13-15: clamp(0.8125rem, 0.769rem + 0.2174vw, 0.9375rem);
    --fluid-15-30: clamp(0.9375rem, 0.6114rem + 1.6304vw, 1.875rem);
    --fluid-16-38: clamp(1rem, 0.5217rem + 2.3913vw, 2.375rem);
}

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

img{
    max-inline-size: 100%;  /*max-width: 100% for internationalization approach*/
    block-size: auto; /*height: auto for internationalization approach*/
    inline-size: auto; /*width: auto for internationalization approach*/
    object-fit: cover; 
    object-position: top center; /*for images that are not square*/
}

.icon{
    display: flex;
    justify-content: flex-end;
    margin-block-start: clamp(1.5rem, 2vw, 2rem); /* margin-top for internationalization */
}

body, html{
    scroll-behavior: smooth;
    text-rendering: optimizeLegibility;
    -webkit-font--smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body{
    display: grid;
    place-items: center;
    min-height: 100dvh;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
    background-color: var(--white-color);
    color: var(--grey-color-500);
    font-size: var(--fluid-13-15);
}

.container{
    max-inline-size: 1200px;  /*max-width: 100% for internationalization approach*/
    padding: clamp(1.5rem, 2vw, 2rem);
}

.card-grid{
    display: grid;
    gap: clamp(1.5rem, 2vw, 2rem);
}
.cards {
  margin-block-start: clamp(1rem, 2rem + 0.5vw, 1.5rem); /* margin-top for internationalization */
  box-shadow: 0rem 0.625rem 1.25rem -0.625rem var(--grey-color-400), var(--grey-color-500) 0rem 0.375rem 0.375rem -0.375rem;
  border-radius: 0.375rem; /* 6px for internationalization */
  background-color: var(--white-color);
  padding: clamp(1rem, 1.5rem, 2rem);
}

.card-cyan-color{
    border-block-start: var(--cyan-color) 0.25rem solid; /* border-top for internationalization */
}

.card-red-color{
    border-block-start: var(--red-color) 0.25rem solid; /* border-top for internationalization */
}

.card-orange-color{
    border-block-start: var(--orange-color) 0.25rem solid; /* border-top for internationalization */
}

.card-blue-color{
    border-block-start: var(--blue-color) 0.25rem solid; /* border-top for internationalization */
}

.attribution {
    font-size: var(--fluid-11-13); 
    text-align: center;
    margin-block-start: clamp(1rem, 1.5rem + 1vw, 2rem); /* margin-top for internationalization */
    margin-block-end: clamp(0.5rem, 1rem, 1.5rem); /* margin-bottom for internationalization */
}
.attribution a {
    color: var(--grey-color-500);
}

a:hover, a:focus {
    text-decoration: none;
    font-weight: 600;
}

.header {
    text-align: center;
    margin-block-start: clamp(1rem, 1.5rem + 1vw, 2rem); /* margin-top for internationalization */
    margin-block-end: clamp(1rem, 1.5rem + 1vw, 2rem); /* margin-bottom for internationalization */
}

h1, span{
    font-size: var(--fluid-16-38);
    margin-block-end: clamp(1rem, 1rem + 1vw, 1.5rem); /* margin-bottom for internationalization */
}

span {
    font-weight: 200;
}

h1, h2 {
    font-weight: 600;
}

h2 {
    font-size: var(--fluid-15-30);
    margin-block-end: clamp(0.5rem, 1rem, 1.5rem); /* margin-bottom for internationalization */
}
   
.description {
   margin-inline-start: auto; /* margin-left for internationalization */
   margin-inline-end: auto; /* margin-right for internationalization */
}

@media screen and (min-width: 43.688rem) { /* 699px */
   .card-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
   }
   
   .card-cyan-color {
        grid-row: 2 / 4;
        grid-column: 1;
    } 

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

    .card-orange-color {
        grid-row:  3 / 5;
        grid-column: 2;
    }
        
    .card-blue-color {
        grid-row: 2 / 4;
        grid-column: 3;
    }

    .description{
        max-inline-size: 55ch; /* max-width for internationalization */
    }

}