/* Skills */

    .skills_container {
        width: 100vw;
        height: 70vh;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        position: relative;
        background-color: var(--about-color-background);
    }

        @media (max-width: 800px) {
            .skills_container {
                grid-template-columns: 1fr;
                grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
                padding-bottom: 50px;
            }
        }

    .skills {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
        transition: var(--transition_duration);
        border-radius: var(--border);
    }

        @media (max-width: 800px) {
            .skills {
                flex-direction: row;
            }
        }

    .skills:hover {
        background-color: hsla(260, 63%, 66%, 0.2);
    }

    .skills img {
        aspect-ratio: 1 / 1;
        width: 50%;
        object-fit: contain;
        transition: var(--transition_duration);
    }

        @media (max-width: 800px) {
            .skills img {
                width: 50px;
            }
        }

    .skills span {
        transition: var(--transition_duration);
    }

    .skills:hover img, .skills:hover span {
        scale: var(--hover_scale);
    }

    .skills_header {
        position: absolute;
        top: var(--gap);
        left: var(--gap);
    }

    
        @media (max-width: 800px) {
            .skills_header {
                display: none;
            }
        }