@charset "utf-8";

.center-main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-gap: 1rem;
        margin: 0 auto;
        padding: 1rem;
        max-width: 32rem;
}
.center-button {
        position: relative;
        display: block;
        padding-bottom: 100%;
        background-color: #4b89dc;
        border-radius: 1rem;
        box-shadow: 2px 2px 8px rgba(50, 50, 52, 0.32);
        overflow: hidden;
}

.center-button:after {
        content: '';
        position: absolute;
        top: auto;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 1;
        opacity: 0.24;
        width: 72%;
        height: 72%;
}

.b1 {
        background: linear-gradient(315deg, #f6bb42, #ffce54);
}

.b1:after {
        content: url(/_assets/img/center/kakaotalk.svg);
}

.b2 {
        background: linear-gradient(315deg, #37bc9b, #48cfad);
}

.b2:after {
        content: url(/_assets/img/center/icon_history_measurement--white.svg);
}

.b3 {
        background: linear-gradient(315deg, #e9573f, #fc6351);
}

.b3:after {
        content: url(/_assets/img/center/icon_alert--white.svg);
}

.b4 {
        background: linear-gradient(315deg, #3bafda, #4fc1e9);
}

.b4:after {
        content: url(/_assets/img/center/icon_user--white.svg);
}

.button-title {
        position: absolute;
        top: 12%;
        right: 12%;
        bottom: auto;
        left: 12%;
        z-index: 2;
        margin: 0;
        max-height: 3rem;
        line-height: 1.5rem;
        font-size: 1.25rem;
        font-weight: 600;
        color: #ffffff;
        word-break: keep-all;
        overflow: hidden;
}