.contact__info {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.contact__info > button {
    display: flex;
    align-items: center;
    gap: 25px;
    text-align: left;
}

.contact__info svg {
    height: 21px;
}

.contact__info svg:last-child {
    fill: var(--color-primary-500);
    visibility: hidden;
    opacity: 0;
    transition: all ease-out 0.25s;
}

.contact__info p {
    margin: 0;
    max-width: 194px;
    font: 16px/21px font-primary;
    color: var(--color-primary-600);
    transition: color 0.25s;
}

.contact__info > button:focus {
    outline: none;
}

.contact__info > button:focus p,
.contact__info > button:hover p {
    color: var(--color-primary-300);
}

.contact__info > button:focus svg:last-child,
.contact__info > button:hover svg:last-child {
    opacity: 1;
    visibility: visible;
}

@media screen and (min-width: 768px) {
    .contact__info p {
        max-width: unset;
    }
}

@media screen and (min-width: 912px) {
    .contact__info {
        gap: 20px;
    }

    .contact__info > button {
        gap: 17px;
    }

    .contact__info p {
        font: 14px/18px font-primary;
    }
}

@media screen and (min-width: 1200px) {
    .contact__info {
        gap: 26px;
    }

    .contact__info > button {
        gap: 21px;
    }

    .contact__info svg {
        height: 28px;
    }

    .contact__info p {
        font: 16px/20px font-primary;
    }
}

@media screen and (min-width: 1400px) {
    .contact__info {
        gap: 40px;
    }

    .contact__info > button {
        gap: 38px;
    }

    .contact__info > button p {
        font: 21px/32px font-primary;
    }
}