:root {
    --black: #1d1d1d;
    --white: #f5f5f5;
    --mid: rgba(192, 192, 192, 0.048);
}

* {
    font-family: "Roboto", sans-serif;
    color: var(--white);
}

* a, li, ul {
    text-decoration: none;
    list-style: none;
}

body {
    background-color: var(--black);
}

header {
    display: flex;
    justify-content: center;
    padding: 50px;
}

img.logo {
    height: 50px;
}

main {
    display: flex;
    justify-content: center;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 350px);
    gap: 50px;
}

.grid-item {
    background-color: var(--mid);
    padding: 25px;
    border-radius: 25px;
}

ul {
    padding: 0;
}

.link-container li {
    margin-bottom: 15px;
}

a.link {
    display: flex;
    gap: 10px;
}

li:hover span {
    color: #8f8f8f;
}

img.icon {
    width: 15px;
}

h2.title {
    margin-top: 0;
}

@media (max-width: 1200px) {
    .grid-container {
        grid-template-columns: repeat(2, 350px);
        gap: 30px;
    }
}

@media (max-width: 800px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 500px) {
    .grid-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}