@use "../theme/breakpoints" as *;

.tip {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0 auto;
    background: rgba(19, 19, 33, 0.6);
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-left: 3px solid white;

    &::before {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 1rem;
        width: 2.5rem;
        content: "i";
        border: 2px solid white;
        border-radius: 50%;
        padding: 0.2rem;

        @media screen and (max-width: $breakpoints-md) {
            width: 3.5rem;
        }
    }
}