Search code examples
htmlcssflexboxcss-selectorscss-grid

CSS Grid is breaking apart while scaling down the window - issue with "fixed position"?

I'm new in web programming and I am trying to build from scratch a static art portfolio website that can be responsive. I've been recommended for the layout that I wanted to use CSS Grid, I am also combining containers using flexbox for the content that goes inside it. The structure that I have in my website is the following:

  1. Navbar
  2. Header
  3. Content

Image of the concept of my website

Basically I wanted the lateral vertical navbar to be in a fixed position, so the user can scroll down while that stays in the same place. I did achieve that using the property position: fixed but I believe that's perhaps provoking part of the grid it's not being adjusted within the navbar and it gets pushed to the right side while changing the size of the window and the gallery in "content" gets displaced underneath the navbar. The affected element is "content" (forgive the repetiveness of the names / words). The issue happens predominantly on Chromium based browsers.

So basically both the grid element called "content" and the items within that structure (which are using flexbox) are having issues.

What I tried so far:

  • I have some @media properties too established in my CSS for adjusting the navbar while scaling down. I tried to see if deleting that property would fix the problem but it's still the same.

  • I tried deleting the gallery that I've put inside "content" to see if that fixes the issue but it doesn't.

Honestly, I am really not sure what to do to fix the problem. Is probably very silly what's going on but I don't know how to solve it.

The code in my website:

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    background-color: none;
    font-family: 'Raleway', sans-serif;
    scroll-behavior: smooth;

    

    /* Adjust font size */
    -webkit-text-size-adjust: 100%;

    /* Font variant */
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;

    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.7px;
    
    @-webkit-keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-moz-keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes rotate-forever {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
    
    
    
    
}



/* Basic structure */




.grid {
    animation: fadein 2s;
    
}


@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

.grid {
    display: grid;
    grid-template-rows: 1fr fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}






#navbar {

    background-color: #3c5d79;
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 1;
    padding: 3vw;
    align-content: center;
    text-align: center;
    color: #f4d3cc;
    height: 100vh;
    width: 40vh;
    position: fixed;
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
}





#header2 {

    background-color: #f2f2f5;
    grid-row-start: ;
    grid-column-start: 2;

    grid-row-end: 2;
    grid-column-end: 6;
    height: 15vh;

}


#header {

    background-color: #f4d3cc;
    grid-row-start: ;
    grid-column-start: 2;

    grid-row-end: 2;
    grid-column-end: 6;
    height: 15vh;

}



#content {

    background-color: #f2f2f5;


    grid-row-start: 2;
    grid-column-start: 2;
    height: 100%;

    grid-row-end: 3;
    grid-column-end: 6;

}






/* styling */

/* -------NAVBAR STYLING START-------- */


a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    color: inherit;
}


a:hover {
    color: white;
}
a {
    transition: color 500ms ease 0.1s;
}


.contnav {

    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    padding-top: 20%;
    text-align: center;
    align-content: center;
    line-height: 30px;
    color: #f4d3cc;

}


/* Line height is provoking the grid to break */


.work-nav {


    margin-top: 15%;
    margin-bottom: 5%;
    font-weight: 700;
    font-size: 13px;
    color: #f4d3cc;


}


.logo-nav {

    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    color: #f4d3cc;

}


.divbar {

    border-top: 1.5px solid #bbb;
    margin: 15px;
    height: 0px;
    color: #3c5d79;

}


.divbar1 {

    border-top: 2px solid #bbb;
    margin: 27px;


}



.items-nav {
    
}



.items-nav2 {


    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
    padding-top: 100px;

}


.division {

    padding: 10px;
}


.info-nav2 {


    font-weight: 700;


}




.icons {

    display: flex;
    align-items: center;
    padding-top: 70%;
    justify-content: space-around;



}


.circle1 {

    width: 10px;
    height: 10px;
    background: #f4d3cc;
    border-radius: 50%
}



.circle2 {

    width: 10px;
    height: 10px;
    background: #f4d3cc;
    border-radius: 50%
}


.circle3 {

    width: 10px;
    height: 10px;
    background: #f4d3cc;
    border-radius: 50%
}


/* -------NAVBAR STYLING END-------- */











/* -------HEADER STYLING START-------- */




.navmarg {
    
    padding-left: 20px;
    
}

.info-header2 {


    padding-top: 25px;
    display: flex;
    margin: 20px;
    font-size: 1.3rem;
    font-weight: 300;
    color: #3c5d79;


}


.info-header {


    margin-top: 34px;
    margin-bottom: 34px;
    display: flex;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 300;
    color: #3c5d79;


}



/* -------HEADER STYLING END-------- */
















/* -------CONTENT STYLING START-------- */




.contbox {

    display: flex;
    align-content: center;
    margin: 1vh;
    color: #595959;
    display: flex;
    margin: 15px;
    padding: 2%;
    font-size: 1rem;
    margin-left: 10%;
    margin-right: 10%;
}


/* -------CONTENT STYLING END-------- */




/* -------GALLERY-------- */



.gallery-container {
    
    display: flex;
    align-content: center;
    padding-left: 30px;
}


.image-gallery {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    padding: 50px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    grid-gap: 20px;
}

.image-gallery .image-box {
    position: relative;
    background-color: #d7d7d8;
    overflow: hidden;
}

.image-gallery .image-box:nth-child(7n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

.image-gallery .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: all 0.5s ease;
}

.image-gallery .image-box:hover img {
    transform: scale(1.1);
}

.image-gallery .image-box .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fafafaf2;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 1;
}

.image-gallery .image-box:hover .overlay {
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    opacity: 1;
}

.image-gallery .image-box .details {
    text-align: center;
}

.image-gallery .image-box .details .title {
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: 600;
    position: relative;
    top: -5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.image-gallery .image-box .details .category {
    font-size: 18px;
    font-weight: 400;
    position: relative;
    bottom: -5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.image-gallery .image-box:hover .details .title {
    top: 0px;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s 0.2s ease;
}

.image-gallery .image-box:hover .details .category {
    bottom: 0;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s 0.2s ease;
}

.image-gallery .image-box .details .title a,
.image-gallery .image-box .details .category a {
    color: #222222;
    text-decoration: none;
}

/* Let's make it responsive */
@media (max-width: 768px) {
    .image-gallery {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-auto-rows: 250px;
    }

    .image-gallery .image-box:nth-child(7n + 1) {
        grid-column: unset;
        grid-row: unset;
    }
}



 @media screen and (max-width: 1200px) {
    #navbar {
      width: 26%;
    }
    #navbar .logo-nav {
      font-size: 100% !important;
    }
     
     #navbar li {
         
         font-size:100%; !important;
     }
  
    .d {
      display: none;
    }
  }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inicio - Portfolio</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/java.js"></script>
</head>

<body>
    <div class="grid">


        <div id="navbar">


            <div class="logo-nav"><a href="#">PORTFOLIO</a></div>
            <div class="divbar1"></div>

            <div class="contnav">


                <div class="work-nav">WORK</div>


                <div class="items-nav">

                    <ul>
                        <li><a href="#"><i class="Animation"></i>Animation</a></li>
                        <li><a href="#"><i class="Rough"></i>Rough</a></li>
                        <li><a href="#"><i class="Original Art"></i>Original Art</a></li>
                        <li><a href="#"><i class="Graphic Design"></i>Graphic Design</a></li>
                        <li><a href="#"><i class="Character design"></i>Character Design</a></li>
                    </ul>

                </div>





                <div class="items-nav2">
                    <ul>
                        <li>
                            <div class="info-nav2"><a href="#">About me</a></div>
                        </li>


                        <li><a href="#"><i class="contact"></i>Contact</a></li>
                    </ul>

                    
                    
                    
                    
                    <div class="icons">

                        <div class="circle1"></div>
                        <div class="circle2"></div>
                        <div class="circle3"></div>

                    </div>
                </div>


            </div>
        </div>


        <!--<div id="header2">
            <div class="navmarg">
                <p class="info-header2">ORIGINAL ART</p>
                <div class="divbar"></div>
            </div>
        </div>-->
        
        
        <div id="header">
            <p class="info-header">WORK</p>
        </div> -->


        <div id="content">

            <!--  <div class="contbox">
                00
                
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pjjjariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                
            </div> -->

<div class="gallery-container">
            <div class="image-gallery">
                <div class="image-box">
                    <img src="images/5.png" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Original Art</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/2.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/3.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/7.png" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/11.png" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/6.png" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/4.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/img-5.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/img-6.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/img-4.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/img-10.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="image-box">
                    <img src="images/img-7.jpg" alt="img.jpg" />
                    <div class="overlay">
                        <div class="details">
                            <h3 class="title">
                                <a href="#">Your Title</a>
                            </h3>
                            <span class="category">
                                <a href="#">Category</a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
</div>


        </div>
    </div>
</body>

</html>

Solution

  • This would be my approach:

    • Media queries are used to add complexity rather than remove it
    • Grid and flex are used instead of absolute positioning
    • I've set you up with some custom props for your colours, but you'll have to go through and finish that

    @import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
  --headerBackground: #3c5d79;
  --headerText: #f4d3cc;
  --mainBackground: #f2f2f5;
  --mainHeaderBackground: #f4d3cc;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  background-color: none;
  font-family: "Raleway", sans-serif;
  scroll-behavior: smooth;
  font-variant-ligatures: none;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.7px;
}

a:link,
a:hover,
a:focus,
a:active {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: white;
}

a {
  transition: color 500ms ease 0.1s;
}

body {
  display: grid;
}

.main-header {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
  min-height: 100vh;
  padding: 3vw;
  background-color: var(--headerBackground);
  color: var(--headerText);
}

.main-header h1 {
  font-weight: 700;
  font-size: 1.5rem;
  padding: 1.3em;
  border-bottom: 1.5px solid #bbb;
}

.main-header li {
  padding-block: 1em;
}

.main-header li li {
  padding-block: 0.5em;
}

.main-header .icons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.main-header .circle {
  width: 10px;
  height: 10px;
  background: #f4d3cc;
  border-radius: 50%;
}

.info-header {
  font-size: 2.5rem;
  font-weight: 300;
  text-align: center;
  padding: 2rem;
  background-color: var(--mainHeaderBackground);
  color: #3c5d79;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  margin: 0 auto;
  padding: 4rem 2rem;
  grid-gap: 1.5rem;
}
.image-gallery .image-box:nth-child(7n + 1) {
  grid-area: span 2 / span 2;
}
.image-box {
  position: relative;
  background-color: #d7d7d8;
}
.image-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-box .overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  transition: all 0.5s ease;
  opacity: 0;
  background-color: #fafafaf2;
  color: #222;
  text-align: center;
}
.image-box:hover {
  cursor: pointer;
  transform: scale(1.1);
}
.image-box:hover .overlay {
  opacity: 1;
}
@media (min-width: 50rem) {
  body {
    grid-template-columns: 1fr 3fr;
    max-height: 100vh;
  }
  header {
    max-height: 100vmax;
  }
  main {
    max-height: 100vh;
    overflow: auto;
  }
}
        <header class="main-header">
      <h2 class="logo-nav"><a href="#">PORTFOLIO</a></h2>
      <nav>
        <ul class="contnav">
          <li>
            <h2 class="work-nav">WORK</h2>
            <ul>
              <li>
                <a href="#"><i class="Animation"></i>Animation</a>
              </li>
              <li>
                <a href="#"><i class="Rough"></i>Rough</a>
              </li>
              <li>
                <a href="#"><i class="Original Art"></i>Original Art</a>
              </li>
              <li>
                <a href="#"><i class="Graphic Design"></i>Graphic Design</a>
              </li>
              <li>
                <a href="#"><i class="Character design"></i>Character Design</a>
              </li>
            </ul>
          </li>
          <li>
            <ul>
              <li>
                <div class="info-nav2"><a href="#">About me</a></div>
              </li>
              <li>
                <a href="#"><i class="contact"></i>Contact</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
      <div class="icons">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
      </div>
    </header>
    <main>
      <header class="info-header">
        <h2>WORK</h2>
      </header>
      <section class="image-gallery">
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
        <figure class="image-box">
          <img src="https://source.unsplash.com/random/500x500" alt="Original Art" />
          <figcaption class="overlay">
            <h3 class="title">
              <a href="#">Original Art</a>
            </h3>
            <a class="category" href="#">Category</a>
          </figcaption>
        </figure>
      </section>
    </main>