/* =========================
   Detail information (component)
   ========================= */

.detail-information{
    /* wrapper */
    --di-wrap-radius: 28px;
    --di-wrap-padding: 48px;
    --di-wrap-gap: 16px;
    --di-wrap-bg: var(--background-orange);

    /* item */
    --di-item-radius: 999px;
    --di-item-padding-y: 37px;
    --di-item-padding-x: 24px;
    --di-item-gap: 8px;
    --di-item-bg: var(--light-orange);
    --di-item-color: var(--orange);

    /* typography */
    --di-title-size: 48px;
    --di-title-lh: 66px;
    --di-desc-size: 16px;
    --di-desc-lh: 22px;

    /* icon */
    --di-icon-size: auto;
    --di-icon-gap: 4px;
}

.detail-information__container {
    padding-left: 0;
    padding-right: 0;
}

.detail-information__wrapper{
    border-radius: var(--di-wrap-radius);
    padding: var(--di-wrap-padding);
    gap: var(--di-wrap-gap);
    background: var(--di-wrap-bg);
}

.detail-information__inner{
    min-width: 0;
    padding: var(--di-item-padding-y) var(--di-item-padding-x);
    gap: var(--di-item-gap);
    text-align: center;
    color: var(--di-item-color);
    background: var(--di-item-bg);
    border-radius: var(--di-item-radius);
}

.detail-information__title{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--di-title-size);
    font-weight: 600;
    line-height: var(--di-title-lh);
    font-family: var(--font-serif);
}

.detail-information__description{
    font-size: var(--di-desc-size);
    font-weight: 500;
    line-height: var(--di-desc-lh);
    font-family: var(--font-onest);
    text-wrap: balance;
}

.detail-information__title img{
    width: var(--di-icon-size);
    height: var(--di-icon-size);
    margin-left: var(--di-icon-gap);
}

@media (max-width: 1024px){
    .detail-information__wrapper{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px){
    .detail-information{
        --di-wrap-padding: 16px 8px;
        --di-wrap-gap: 8px;

        --di-item-radius: 14px;
        --di-item-padding-y: 10px;
        --di-item-padding-x: 8px;

        --di-title-size: 28px;
        --di-title-lh: 34px;

        --di-desc-size: 13px;
        --di-desc-lh: 16px;

        --di-icon-size: 18px;
    }

    .detail-information__inner{
        min-height: 112px;
        justify-content: center;
    }
}