.e-social-media {
    --icon-size: 40px;


    display: flex;
    align-items: center;
    gap: 16px;

    .social-media-item {
        display: block;
        height: var(--icon-size);
        width: var(--icon-size);
        font-size: var(--icon-size);
        line-height: var(--icon-size);
        color: var(--color-primary);

        &:hover {
            color: var(--color-secondary);
        }
    }

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

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

    // 1248
    @media screen and (min-width: 1248px) {}

    // 1440
    @media screen and (min-width: 1440px) {}

    // 1600
    @media screen and (min-width: 1600px) {}

    // 1920
    @media screen and (min-width: 1920px) {}

    // HOVER
    @media (hover: hover) {}

}