section {display: flex; flex-direction: column; gap: 20px; margin-top: 50px;}
section p {font-weight: 700; font-size: 20px; letter-spacing: -0.03em; color: #3F4665; padding-left: 12px; position: relative;}
section p::before {content: ''; display: block; width: 5px; height: 16px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
section:nth-of-type(1) p::before {background: #3D6CFB;}
section:nth-of-type(2) p::before {background: #8E00FA;}
section:nth-of-type(3) p::before {background: #8DD457;}
section:nth-of-type(4) p::before {background: #F1CA39;}
section ul {display: flex; flex-wrap: wrap; gap: 15px;}
section ul li a figure {display: flex; flex-direction: column; gap: 16px; position: relative;}
section ul li a figure::before {content: ''; position: absolute; top: 0; left: 0; display: block; width: 382px; height: 220px; z-index: 1; border-radius: 3px;}
section ul li a figure::after {content: 'Download'; position: absolute; border-radius: 3px; display: block; width: 382px; height: 220px; background: url("/images/customer-center/proposal/ic_download-hover.svg") center top 42% no-repeat rgba(0,0,0,0.75); backdrop-filter: blur(5px); opacity: 0; padding-top: 30%; transition: opacity 0.2s ease-in-out; font-weight: 500; font-size: 16px; text-align: center; color: #fff; z-index: 3; box-sizing: border-box;}
section:nth-of-type(1) ul li a figure::before { background: #BDDFFE;}
section:nth-of-type(2) ul li a figure::before { background: #E1E3FE;}
section:nth-of-type(3) ul li a figure::before { background: #E0F5E8;}
section:nth-of-type(4) ul li a figure::before { background: #FDF7CF;}
section ul li a figure img {border-radius: 3px; overflow: hidden; width: 382px; height: 220px; z-index: 2; position: relative; transform: scale(0.85);}
section ul li a figure figcaption {font-weight: 500; font-size: 16px; letter-spacing: -0.03em; line-height: 1.5; background: url("/images/customer-center/proposal/ic_download.svg") right bottom no-repeat; padding-right: 26px; align-self: flex-start;}

@media (hover: hover) and (pointer: fine) {
    section ul li a:hover figure::after {opacity: 1;}
}
@media (max-width: 1060px) {
    section ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    section ul li a figure::before,
    section ul li a figure::after,
    section ul li a figure img {
        width: 100%;
        height: auto;
        aspect-ratio: 191/110;
    }
}
@media (max-width: 600px) {
    section ul {
        gap: 24px 12px;
    }
    section ul li a figure {
        gap: 8px;
    }
    section ul li a figure::after {
        background-size: 18px;
        background-position: center top 35%;
        font-size: 12px;
    }
    section ul li a figure figcaption {
        background-size: 14px;
        font-size: 14px;
        line-height: 1;
        background-position: right top 1px;
        padding-right: 18px;
    }
}
@media (max-width: 500px) {
    section p {
        font-weight: 500;
        font-size: 18px;
    }
}