.gap-16 {
    gap: 16px;
}

.gap-24 {
    gap: 24px;
}

.gap-32 {
    gap: 32px;
}

.large-number {
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px; /* 120% */
    letter-spacing: -0.65px;
}

#banner {
    background: linear-gradient(to bottom, #F3F7F8 70%, #fff 30%);
}

.banner-img {
    width: 100%;
    max-width: 670px;
    aspect-ratio: 670/450;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
}

#advices.section-inner {
    position: relative;
}

#advices .btn {
    padding: 20px 32px !important;
}

.published-date {
    color: #6F6F6F;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.advices-container {
    display: flex;
    flex-direction: row;
}

.advice-left-contents {
    flex: 2;
    max-width: 670px;
}

.advice-right-table-of-contents {
    flex: 1;
    position: relative;
}

.advice-copy {
    display: flex;
    flex-direction: column;
    gap: 64px
}

.special-content-box {
    background: #F3F7F8;
    border-radius: 16px;
    padding: 32px;
}

.special-content-box li {
    font-size: 16px;
}

table.table-custom {
    border-bottom: 1px solid #6F6F6F !important;
}

table.table-custom a {
    font-weight: 500;
}

table.table-custom thead tr th {
    background-color: #F3F4F5 !important;
}

table.table-custom thead tr {
    border-bottom: none !important;
    border-top: 1px solid #6F6F6F;
}

table.table-custom.table-striped:not(.table-stack) tbody tr:nth-child(even) td, 
table.table-custom.table-striped:not(.table-stack) tbody tr:nth-child(even) th {
    background-color: #FAFAFA !important;
}

table.table-custom.table-striped:not(.table-stack) tbody tr:nth-child(odd) td, 
table.table-custom.table-striped:not(.table-stack) tbody tr:nth-child(odd) th {
    background-color: #FFF !important;
}

.key-terms-block {
    background-color: #F3F7F8;
    border-radius: 24px;
}

.key-terms-block .custom-grid-wpr {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:15px;

    dl {
        margin-top:auto;
        margin-bottom:auto;
    }
    dd {
        margin-left:auto;
        font-weight:500;
    }
    
}

.key-term {
    height:100%;
    background-color: #fff;
    border-radius: 8px;
    padding: 32px 16px;
}

#ready-to-start {
    background-image: url(/learn/_assets-custom/images/ready-to-start-bg.webp); 
    background-size: cover; 
    background-position: 100%;
    position: relative;
}

#ready-to-start .grid-wpr.dividers>[class*=grid-]:after {
    background-color: #fff;
}

#gosmart-img {
    max-width: 152px;
}

.phone-img {
    position: absolute;
    max-width: 371px;
    bottom: 0;
    right: calc(50% + 64px);
}

.pale-box {
    border-radius: 8px; 
    background: rgba(255, 255, 255, 0.80); 
    max-width: 493px;
}

@media screen and (max-width: 639px) {
    .key-terms-block .custom-grid-wpr {
        grid-template-columns: auto;
    }
}

@media screen and (max-width: 900px) {
    .phone-img {
        position: absolute;
        max-width: 271px;
        bottom: 0;
        right: calc(50% + 44px);
    }
}

@media screen and (max-width: 800px) {
    /* for the side nav will be changed to dropdown when width < 800px */
    .advice-left-contents {
        max-width: unset;
    }
}

@media screen and (max-width: 639px) {
    h1 {
        font-size: 24px;
        line-height: 30px;
    }

    #banner {
        background: linear-gradient(to bottom, #F3F7F8 60%, #fff 40%);
    }

    .advices-container {
        flex-direction: column-reverse;
    }

    .advice-copy img {
        max-width: 100%;
    }

    .table-swipe tbody .tablesaw-swipe-cellpersist, table tbody .tablesaw-swipe-cellpersist {
        border-right: 1px solid #6F6F6F !important;
    }

    #ready-to-start .eh-wpr {
        display: flex;
    }

    #ready-to-start .grid-wpr.dividers>[class*=grid-]:after {
        width: 1px;
        height: 100%;
        position: absolute;
        margin: 0;
    }

    #gosmart-img {
        max-width: 142px;
    }

    .phone-img {
        position: static;
        max-width: 212px;
        margin-left: auto;
        margin-right: auto;
    }

}

/* 
    for the share buttons, reference from:
    https://www.rbcroyalbank.com/en-ca/my-money-matters/goals-aspirations/buying-a-home/buying-your-first-home/how-you-can-afford-your-first-home-in-canada-yes-even-in-this-market/
 */

.social-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}

.social-links.vertical {
    flex-direction: column;
    gap: 20px;
    border-right: 1px solid #e0e0e0;
}

.social-links span {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.social-links img {
    width: 23px;
    height: 20px;
}

.social-links .sharing-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 70px;
}

.socials-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.socials-block.floating-left {
    position: absolute;
    left: -100px;
}

@media screen and (max-width: 1080px) {
    .social-links.vertical {
        flex-direction: row;
        gap: 30px;
        border-right: none;
    }
    
    .socials-block.floating-left {
        position: unset;
        left: unset;
        top: unset;
        padding-top: 30px;
        padding-bottom: 30px;
        margin-bottom: 15px;
        border-bottom: 1px solid #e0e0e0;
    }
}

@media screen and (max-width: 1200px) {
    .social-links {
        gap: 16px;
    }
}

@media screen and (max-width: 639px) {
    .social-links,
    .social-links.vertical {
        justify-content: space-between;
        gap: 10px;
    }

    .social-links .sharing-custom {
        width: 55px;
    }
}