CSS Grid

by George Y

HTML

<div class="container">
                    <div class="landing-category-section">
                                <div class="category-title">
                                    Browse by category
                                </div>

                                <div class="col-block center">
                                    <a href="/docs/why-did-we-build-document360">
                                        <div class="category-l">
                                                    <span class="category-icon doc360column-target" style="color:#863ab5"></span>
                                        </div>
                                        <div class="category-r">
                                            <h3>Getting started</h3>
                                            <p>This section provides information on Getting started with Document360</p>
                                        </div>
                                        <span class="more-icon">
                                            <i class="far fa-arrow-circle-right" aria-hidden="true"></i>
                                        </span>
                                    </a>
                                </div>
                                <div class="col-block center">
                                    <a href="/docs/understanding-home-page-builder">
                                        <div class="category-l">
                                                    <span class="category-icon doc360column-monitor" style="color:#863ab5"></span>
                                        </div>
                                        <div class="category-r">
                                            <h3>Home page builder</h3>
                                            <p>This section provides information on Home page builder with Document360</p>
                                        </div>
                                        <span class="more-icon">
         ...

CSS

html { font-size: 22px; }
body { padding: 1rem; }

.contact-us {  max-width: 1200px;
  display:flex;
  
}

.contact-us-inner {
    display:flex;
    flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  color: #222222;
}

.contact-us .ct-image { }

.contact-us .ct-image .ct-icon {
    background-image: url(https://cdn.document360.io/441b51d0-1091-4ad7-885e-c6d34f462c97/Images/Documentation/noun-contact-us-1446911-8EBEF3.png);
    display: flex;
    height: 90px;
    min-width: 90px;
    background-size: 90px auto;
    background-repeat: no-repeat;
    background-position: center center;
}

.contact-us .ct-text .ct-title { font-weight: 700; }

.contact-us .ct-text {  }



.featured-article {
  display:flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  color: #222222;
  padding: 1rem;
  height: 8rem;
  text-align: center;
}
.featured-article:hover {
  a.fas-link span.txt {
    text-decoration: underline;
  }
}
.featured-articles {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

a.fas-link span.img {
    background-size: 60px auto;
    height: 60px;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    width: 100%;
    margin-bottom: 1rem;
}

a.fas-link span.txt {
  color: #7a7a7a;
  text-decoration: none;
  font-weight: 700;
}

a.fas-link span.img.accident-care {
  background-image: url(https://cdn.document360.io/441b51d0-1091-4ad7-885e-c6d34f462c97/Images/Documentation/noun-car-accident-3810855-8EBEF3.png);
}
a.fas-link span.img.renewal {
    background-image: url("https://cdn.document360.io/441b51d0-1091-4ad7-885e-c6d34f462c97/Images/Documentation/noun-renew-2445057-8EBEF3.png");
}

a.fas-link span.img.cancellation {
    background-image:...