Hi everyone, currently I am learning LWC. I am trying to replicate a website footer from normal HTML, CSS to LWC. I am facing some challenges while doing so. I have attached the screenshot of how my footer should look like and how it is looking now. Any help would be appreciated as I have tried many slds classes and CSS also.


Current - 


Expected - 




<!-- HTML -->

<template>
    <div class="c-container footer-wrapper">
        <div class="page-section page-header footer-content">


            <div class="slds-grid slds-gutters">
                <div class="slds-col">
                    <span><a href="https://dcra.dc.gov/node/735242" title="Spanish (Español)">Spanish
                            (Español)</a></span>
                </div>
                <div class="slds-col">
                    <span><a href="https://dcra.dc.gov/node/735262" title="French (Français)">French
                            (Français)</a></span>
                </div>
                <div class="slds-col">
                    <span><a href="https://dcra.dc.gov/node/735322" title="Vietnamese (Tiếng Việt)">Vietnamese (Tiếng
                            Việt)</a></span>
                </div>
                <div class="slds-col">
                    <span><a href="https://dcra.dc.gov/node/735252" title="Amharic (አማርኛ)">Amharic (አማርኛ)</a></span>
                </div>
                <div class="slds-col">
                    <span> <a href="https://dcra.dc.gov/node/735302" title="Chinese (中文)">Chinese (中文)</a></span>
                </div>
                <div class="slds-col">
                    <span> <a href="https://dcra.dc.gov/node/735272" title="Korean (한국어)">Korean (한국어)</a></span>
                </div>
            </div>


        </div>



        <div class="footer-text.item">

            <div class="slds-grid slds-gutters">
                <div class="slds-col" style="padding-top: 50px; width:133px; height: 52px; padding-left:56px;">
                    <span><img alt="DCRA Logo"
                            src="https://dcra.dc.gov/sites/default/files/dc/sites/dcra/DCRA-Logo-KO.png">

                    </span>
                </div>


                <div class="slds-col slds-p-right_x-large" style="padding-top: 50px; height:25px; width:150px;">
                    <span><img alt="Mayor Logo"
                            src="https://dcra.dc.gov/sites/default/files/dc/sites/dcra/MayorBlogo.png">
                    </span>
                </div>


                <div class="slds-clearfix">
                    <div class="slds-col slds-float_right" style="padding-top: 44px; padding-right:30px;">
                        <span>
                            <p><b>Office Hours</b> Monday, Tuesday, Wednesday,<br>
                                Friday 8:30 am to 4:30 pm and<br>
                                Thursday 9:30 am to 4:30 pm<br><br>
                            </p>
                        </span>
                    </div>
                </div>
            </div>
        </div>


        <div style="border-bottom: 1px solid #fff; padding-bottom: 25px;" class="page-section page-right">

            <div class="slds-grid slds-gutters slds-p-left_xx-large" style="color:white;">
                <div class="slds-col slds-size_2-of-3">
                    <span>Connect With Us 1100 4th Street, SW,<br>
                        Washington, DC 20024<br>
                        Phone: (202) 442-4400
                    </span>
                </div>
                <div class="slds-col slds-size_1-of-3">
                    <span>Fax: (202) 442-9445 <br>
                        TTY: 711 <br>
                        Email: dcra@dc.gov
                    </span>
                </div>
            </div>

        </div>




        <div class="slds-grid slds-gutters" style="padding-top:60px;">
            <div class="slds-col slds-p-left_xx-large">
                <span> <a href="https://www.facebook.com/DCDCRA" target="_blank" title="Facebook"><img
                            src="https://dcra.dc.gov/sites/default/files/dc/sites/summerjobs/featured_content/images/facebook.png"
                            style="border-width: 0px;  height: 25px;  padding-left:28px; padding-right: 5px;"
                            title="Facebook"></a>

                    <a href="https://twitter.com/dcra" target="_blank" title="Twitter"><img
                            src="https://dcra.dc.gov/sites/all/themes/dc_agency_bluesteel/images/Twitterlogo.png"
                            style="border-width: 0px;  height: 25px;  padding-right: 11px;" title="Twitter"></a>

                    <a href="https://instagram.com/dc_dcra/" target="_blank" title="Instagram"><img
                            src="https://dcra.dc.gov/sites/all/themes/dc_agency_bluesteel/images/Instagramlogo.png"
                            style="border-width: 0px; height: 25px; padding-right: 12px;" title="Instagram"></a>

                    <a href="https://www.linkedin.com/company/dcra" target="_blank" title="LinkedIn"><img
                            src="https://dcra.dc.gov/sites/default/files/dc/shared_assets/linkedin.png"
                            style="border-width: 0px; height: 25px; padding-right: 12px;" title="LinkedIn"></a>

                    <a href="mailto:dcra@dc.gov" target="_blank" title="Mail"><img
                            src="https://statehood.dc.gov/sites/default/files/dc/shared_assets/mail_icon.png"
                            style="border-width: 0px; height: 25px; padding-right: 5px;" title="Mail"></a>
                </span>
            </div>


            <div class="slds-col footer-link item slds-p-top_x-small">
                <span>
                    <ul>
                        <li>
                            <a href="https://dc.gov/node/298582">ACCESSIBILITY</a>
                        </li>
                        <li>
                            <a href="https://dc.gov/node/298592">PRIVACY AND SECURITY</a>
                        </li>
                        <li>
                            <a href="https://dc.gov/node/819092">ABOUT DC.GOV</a>
                        </li>
                        <li>
                            <a href="https://dc.gov/node/900572">TERMS AND CONDITIONS</a>
                        </li>
                    </ul>
                </span>
            </div>


            <div class="slds-col" style="padding-top:30px;">
                <span>
                    <p>© 2019-2022 District of Columbia</p>
                </span>
            </div>
        </div>


    </div>


</template>

CSS -
// css backup dcrawebsite

.footer-wrapper {
    background-color: #4A4A4A;
    padding: 45px 15%;
    padding-top: 48px;
    padding-right: 15%;
    padding-bottom: 75px;
    padding-left: 15%;
}

.c-container {
    border: 0px solid #d8dde6;
    margin: 0px 0 0px 0;
}
.page-section {
    border: solid 0px #ccc;
    padding: 2rem;
}
.page-header,
.page-footer {
    height: 50px;
}
.page-main {
    background: #4A4A4A;
}
.page-left,
.page-right {
    background: #4A4A4A;
}
a {
  color: white;
  font-style: inherit;
    font-variant-ligatures: inherit;
    font-variant-caps: inherit;
    font-variant-numeric: inherit;
    font-variant-east-asian: inherit;
    font-weight: inherit;
    font-stretch: inherit;
    font-size: 14px;
    line-height: inherit;
    font-family: sans-serif;
}
p{
    color: white;
}

.footer-content {
    color: #fff;
    padding-top: 0px;
    border-bottom: 1px solid #fff;
    display: flex;
    
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
    
    font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
    font-stretch: 100%;
    font-size: 13px;
    
}

.footer-text.item {
    padding: 10px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.footer-link {
    border-right: 1px solid #747373;
    border-left: 1px solid #747373;
    padding: 0 20px;
    padding-top: 0px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 20px;
}

.item {
    display: flex;
    margin: 10px 0;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
}

.footer-link {
    border-right: 1px solid #747373;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgb(116, 115, 115);
    border-left: 1px solid #747373;
    padding: 0 20px;
    padding-top: 0px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 20px;
}

TIA.

Hi,

I'm new to LWC.
How do I change the button color and size of a lightning-button? It's taking the default from "Variant".

Alternatively, can I use anything else (like icon)?

Any help in this regard is really appreciated.