/* ================= Button ================= */
.button {
    display: inline-block;
    padding: 0.425rem 0.625rem;

    width: 100%;
    text-align: center;

    border: 0.188rem solid var(--clr-white);
    color: var(--clr-black);
    background-color: var(--clr-white);

    font-size: 0.875rem;
    font-weight: 700;
    font-family: var(--ff-title);
    text-transform: uppercase;

    transition: background-color 120ms linear, color 120ms linear;
}

[class*=button__read] span {
    position: relative;
}

.button__read__more {
    border-left: 0;
    border-bottom: 0;
    border-right: 0;

    background: transparent;
    color: var(--clr-main);
}

.button__read__more span::after {
    content: "\F138";
    font-family: bootstrap-icons !important;

    padding-left: 3.885px;

    position: absolute;

    opacity: 0%;
    transition: opacity 120ms linear;
}

.button__read__all {
    max-width: 660px;
    margin-top: 1.5rem;
}

.button__read__all span::after {
    content: "\F4A3";
    font-family: bootstrap-icons !important;
    font-weight: normal;

    padding-left: 3.885px;

    position: absolute;

    opacity: 0%;
    transition: opacity 120ms linear;
}

.button__read__post span::after {
    content: "\F128";
    font-family: bootstrap-icons !important;

    padding-left: 3.885px;

    position: absolute;

    opacity: 0%;
    transition: opacity 120ms linear;
}

[class*=button__read]:hover span::after,
[class*=button__read]:focus span::after {
    opacity: 100%;
}

.button__light {
    border-color: var(--clr-white);
    color: var(--clr-white);
}


.button:hover,
.button:focus {
    background-color: var(--clr-white);
    color: var(--clr-main);
}

.button__blue {
    color: var(--clr-main);
    border-color: var(--clr-main);
}

.button__blue:hover,
.button__blue:focus {
    color: var(--clr-white);
    background-color: var(--clr-main);
    border-color: var(--clr-main);
}

.button__white {
    color: var(--clr-white);
    border-color: var(--clr-white);
}

.button__white:hover,
.button__white:focus {
    color: var(--clr-main);
    background-color: var(--clr-white);
    border-color: var(--clr-white);
}

@media only screen and (min-width: 992px) {

    [class*="anim"]:hover,
    [class*="anim"]:focus {
        transform: translateX(1rem);
    }

    .anim__ease__out {
        transition: background-color 120ms linear, color 120ms linear, transform 500ms ease-out;
    }

    .anim__bounce__out {
        transition: background-color 120ms linear, color 120ms linear, transform 500ms var(--transition-bounce-out);
    }

    .button {
        padding: 0.625rem 0.625rem;
    }
}