:root {
    --bg-color-light: #EBE6E6;
    --bg-color-picture-light: #8C8C8C80;
    --text-color-light: #212121;
    --text-2-color-light: #8C8C8C;
    --bg-color-dark: #3f3c3c;
    --bg-color-picture-dark: #292727;
    --text-color-dark: #e8e6e0;
    --text-2-color-dark: #adaca7;

    color-scheme: dark;

	--background: var(--bg-color-light);
    --background-2: var(--bg-color-picture-light);
	--text: var(--text-color-light);
	--text-2: var(--text-2-color-light);

    font-family: 'AeonikTrial', sans-serif;
}

@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light;

		--background: var(--bg-color-dark);
        --background-2: var(--bg-color-picture-dark);
	    --text: var(--text-color-dark);
	    --text-2: var(--text-2-color-dark);
	}
}

[color-scheme='dark'] {
	color-scheme: dark;

	--background: var(--bg-color-light);
    --background-2: var(--bg-color-picture-light);
	--text: var(--text-color-light);
	--text-2: var(--text-2-color-light);
}

[color-scheme='light'] {
	color-scheme: light;

	--background: var(--bg-color-dark);
    --background-2: var(--bg-color-picture-dark);
	--text: var(--text-color-dark);
	--text-2: var(--text-2-color-dark);
}

body {
    background-color: var(--background);
    color: var(--text);
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

/* Connects font AeonikTrial */
@font-face {
    font-family: 'AeonikTrial';
    src: url('../assets/fonts/AeonikTRIAL-Regular.otf') format('otf');
    font-weight: normal;
    font-style: normal;
}


/*
    CSS text-wrap: balance property
    Allows multiple lines of text to have their lines broken in such a way that each line is roughly the same width, often used to make headlines more readable and visually appealing.

    https://caniuse.com/css-text-wrap-balance
 */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     text-wrap: balance;
 }


 /*
     CSS max-width property
     In this case, we are setting the maximum width of the text to 65 characters, which is a good practice to make the text more readable and visually appealing.

     CSS property: text-wrap: pretty
     This property is used to break lines of text in a way that is visually appealing, often used to make paragraphs more readable and visually appealing.

     https://caniuse.com/mdn-css_properties_text-wrap_pretty
  */
 p,
 li,
 figcaption {
     text-wrap: pretty;
     max-width: 65ch;
 }

 /*
     CSS property: container-type: inline-size
     This property is used to set the width of an element to the width of the containing block, often used to make elements fill the width of the container.

     https://caniuse.com/mdn-css_properties_container-type_inline-size
  */
 body > :is(header, footer),
 main,
 section,
 article {
     container-type: initial;
 }


 section.list {
    column-gap: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    padding: 0 3.5rem;
    row-gap: .5rem;
}

h2 {
    color: var(--text-2);
    margin: 0;
    padding: 1rem 3.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
}


h3 {
    margin-bottom: 0;
}

article {
    display: flex;
    flex-direction: column;
}

picture {
    align-items: center;
    display: flex;
    height: 400px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%;
}

picture::after {
    background: var(--background-2);
    border-radius: 8px;
    bottom: 0;
    content: '';
    /* height: calc(100% - 8em); */
    height: calc(100% - 50%);
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
}

picture img {
    transition: 1 ease-in-out;
    filter: grayscale(1);
    height: 100%;
    object-fit: contain;
    position: relative;
    width: 100%;
    z-index: 1;
}

.list a {
    border-radius: 8px;
    padding: .6em;
    text-decoration: none;
    color: var(--text);
}

.list a:hover img {
    filter: grayscale(0);
    transition: 1 ease-in-out;
}

ul {
    list-style-type: none;
    padding: 0;
}

.navigation {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 1rem 3.5rem;
}

.navigation ul {
    display: flex;
    gap: 1rem;
}

.navigation ul a {
    color: var(--text);
    text-decoration: none;
}

.navigation ul a:hover {
    text-decoration: underline;
}

.person {
    transition: 0.3s;
}

   .person:hover{
    transform: scale(1.1);
   } 

@media (max-width: 800px) {
    section.list {
        padding: .5rem;
        row-gap: .4rem;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    picture {
        height: 200px;
    }


    picture::after {
        height: calc(100% - 4em);
    }

    .navigation {
        padding: 1rem;
        flex-direction: column;
    }
}