Responsive portfolio/contacts with flexbox

I am building from-scratch a one-page portfolio and contacts website that looks fine in the mobile version. What I'm struggling with it's making it look as intended in the tablet and desktop version.

At the moment, the mobile version features a portfolio section with thumbnails and text below (in the mobile view, it will only show 2 projects, but they're supposed to be 8 on tablet and desktop), one under the other. A contacts section with a photo, some intro text, a form, and social icons.

I am still working on the tablet view.

My biggest issues are the following ones:

TABLET VIEW

1. Portfolio: while the 8 projects successfully show up on 2 columns/4 rows, they are slightly aligned on the left. If I managed to get the thumbnails centrally aligned, the text/description is centrally aligned too, but it should show up on the left as it currently is.

2. Contacts: a similar problem occurs with the image in the contacts and the intro text: slightly aligned to the left. While the tablet view should keep the mobile view, i.e., image and intro on top, form in the middle, and social icons at the bottom, on the tablet, the form, in particular, is too wide, which is the reason why I set width, but I am unsure whether it was the right approach.

All thumbs have a class because I wanted them to resize according to the device. But I am afraid that I messed up the code somewhere in the middle by trying different approaches and solutions.

EDIT 10/29/20: I actually fixed the portfolio section by changing some code chunks, like removing "thumb" class from the images.

My biggest issues are now the following:

TABLET VIEW:

1. Contacts section is still messed up: the purpose is still showing one div under the other as in the mobile view, but it is too wide, wrongly aligned, and social icons show up where they are not supposed to.

2. There's some space at the bottom, right below the copyright.

DESKTOP VIEW:

1. The logo and navigation used to show up on the same line, but that's no longer the case, with the navigation appearing on the right but slightly below.

2. Contacts section is messed up here, too: the 3 divs show up right next to each other, while they are supposed to show up 2 divs on the left and 1 div (the bigger/longer, which is the one with a form) on the right.

3. Like in the tablet view, there's some space at the bottom, right below the copyright.

This is the current code:

   /* General Style */
html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    font-size: 16px;
}

body {
    font: 400 1em 'Roboto', Arial, sans-serif;
    color: #BFBFBF;
    background: #262526;
    padding: 0;
    margin: 0 auto;
}

.container {
    width: 90%;
    margin: 0 auto;
    padding: 0;
}

h1, 
h2,
h3 {
    font-family: 'Playfair Display', serif;
    margin: 0;
    padding: 0;
}

h4,
h5,
h6 {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

ul, 
ol {
    list-style-type: none;  
    margin: 0;
    padding: 0;
}

a {
    font-weight: bold;
    color: #ED8E82;
    text-decoration: none;
}

a:hover,
a:active {
    color: #BFBFBF;
}

img {
  width: 100%;
}

.topsection {
    background: #262526;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
}

.middlesection {
    background: #4A484A;
}

.bottomsection {
    background: #F2F2F2;
}


/* Base Header - Footer Style */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row wrap;
    margin: 0 auto;
    text-align: center;
    flex-basis: 100%;
}


header .logo a {
    font: 400 normal 1.25em 'Playfair Display', serif;
    color: #BFBFBF;
    text-transform: uppercase;
    line-height: 2.109375em;
    height: 50px;
    margin: 0;
}

footer {
    margin: 0 auto;
    width: 100%;
}


footer p {
    margin: 0;
}


.copyright {
    font-size: 0.875em;
    color: #BFBFBF;
    text-align: center;
    margin: 20px 0;
}

/* ---- MOBILE STYLE --- */



/* Navigation*/

header nav {
    padding: 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 100%;
}

header nav ul {
    margin: 0;
    padding: 0;
}

header nav ul li {
    padding: 10px 0;
    line-height: 2.109375em;
}

header nav ul li a {
    font: 400 normal 1em 'Roboto', sans-serif;
    color: #BFBFBF;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    position: relative;
    padding-bottom: 5px;
}

header nav ul li a:hover,
header nav ul li a:active {
    color: #ED8E82;
}

p {
    font-size: 1em;
    line-height: 1.25em;
}

/* About */

.about-me {
    margin-bottom: 130px;
}

.about-me h3{ 
    font-weight: bold;
    font-size: 1.875em;
    color: #ED8E82;
    line-height:  1em;
    padding: 25px 0;
}

.about-me span {
    color: #BFBFBF;
}

.about-me p {
    font-size: 1.25em;
}

/* Portfolio */

.portfolio {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#portfolio {
    padding: 65px 0 80px;
}

#portfolio h3 {
    font-weight: bold;
    font-size: 1.875em;
    font-style: italic;
    color: #ED8E82;
    line-height:  1.25em;
    margin-bottom: 65px;
    width: 100%;
    text-align: center;
}

.work {
    display: flex; 
    padding: 0.5em;
    width: 100%;
}


.portfolio h6 {
    font-size: 1em;
    font-style: italic;
    line-height: 1.0625em;
    color: #F2F2F2;
    margin-top: 0;
    margin-bottom: 0.4em;
}

.seemore-link {
    text-align: center;
    margin-top: 30px;
}

.mobileHide {
    display: none;
}


/* Contacts */

.contacts {
    display: flex;
    flex-wrap: wrap;
}

#contacts {
    padding: 65px 0 80px;
}

#contacts h3 {
    font-weight: bold;
    font-size: 1.875em;
    font-style: italic;
    color: #ED8E82;
    line-height:  1.25em;
    margin-bottom: 65px;
    width: 100%;
    text-align: center;
}

.pic-cv {
    display: flex; 
    padding: 0.5em;
    width: 100%;
}

.pic-cv img {
    margin-bottom: 18px;
}

.piccv-text  span {
    color: #ED8E82;
}

.piccv-text  p {
    text-align: left;
    color: #262526; 
}

 .form {
    text-align: left;
    color: #262526;
    max-width:  25em;
    margin-bottom: 18px;
}

.form h6 {
    font-weight: bold;
    font-size: 1em;
    color: #ED8E82;
    line-height: 1.1875em;
    text-align: center;
    margin: 77px 0 25px;
}

.contacts input[type=email] {
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    border: 1px solid #BFBFBF;
    padding: 1em;
    color: #BFBFBF;
    margin-bottom: 12px;
}

.contacts textarea {
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #BFBFBF;
    padding: 1em;
    color: #BFBFBF;
    margin-bottom: 12px;
}

.contacts input[type=submit] {
  width: 100%;
  padding: 20px 0;
  margin-top: 20px;
  background-color: #ED8E82;
  font: 600 normal 1.125em 'Roboto', sans-serif;
  color: #F2F2F2;
  border: none;
  text-align: center;
  text-transform: uppercase;
}

.required:after {
    content:" *";
    color: #ED8E82;
  }

.pic-cv h6 {
    font-weight: bold;
    font-size: 1em;
    color: #ED8E82;
    line-height: 1.1875em;
    width: 100%;
    text-align: center;
    margin: 77px 0 25px;
}

.social-icons {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.social-icons p a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #BFBFBF;
    color: #F2F2F2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 24px;
}

.social-icons p i {
    font-size: 1.3125em;
}

/* End Mobile Style */



/* Tablet Style */ /* 48em = 768px */

@media (min-width: 48em) {
    .mobileHide {
    display: block;
}

    /* About */
    
    .about-me {
    margin-top: 50px;   
    margin-bottom: 172px;
    }
    
    .about-me h3 { 
    width: 100%;
    font-size: 2.25em;
    }
    
    /* Portfolio */
    .work {
    flex: 0 1 47%;  
        
    }
        
    .seemore-link {
    visibility: hidden;
    }
    
    /* Contacts */
    .contacts {
    /*max-width: 38em;*/
    }
    
    .pic-cv {
    justify-content: center;
    align-items: center;
    flex-flow: row wrap; 
    max-width: 25em;
    }
    
    
   
}
        

/* Desktop Style */ /* 75em = 1200px */
@media (min-width: 75em) {
    
    /* Navigation */
    header {
        margin: 0 auto;
    }
    
    header .logo {
        text-align: left;
        flex-basis: 44%;
    }
    
    header nav {
        flex-basis: 44%;
        justify-content: flex-end;
    }
    
    header nav ul li {
        padding: 0 10px;
        display: inline;
    }
    
    header nav ul li a:hover,
    header nav ul li a:active {
    color: #BFBFBF;
    }

    header nav ul li a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #ED8E82;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
    }

    header nav ul li a:hover::before {
    visibility: visible;
    transform: scaleX(1);
    }
    
    
    
    /* About */ 
    
    .about-me {
    margin-top: 250px;
    margin-bottom: 250px;   
    }
    
    .about-me p {
    width: 100%;
    }
    
    /* Portfolio */
    
    .portfolio img {
        
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */    
    -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     filter: grayscale(100%);
     filter: gray; /* IE 6-9 */
    }
    
    img:hover {
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
        filter: none;
    }
    
    .work {
    width: 33.33%;
    }
    
    .work-text {
    display: flex;
    flex-direction: column;
    padding: 1em;
    width: 100%;
    }
    .work-text p {
    flex: 1 0 auto;
    }
    
    /* Contacts */
    
  .pic-cv {
    width: 30%;
  }

  .piccv-text {
   display: flex;
   flex-direction: column;
   padding: 1em;
   width: 100%;
   }
    
.piccv-text p {
   flex: 1 0 auto;
  }

 <body>
     <!-- Header / Navigation -->
        <header class="topsection">
            <div class="container">
                <div class="logo"><a href="">Logo name</a></div>
                    <nav>
                        <ul>
                             <li><a href="#about">About</a></li>
                             <li><a href="#portfolio">Portfolio</a></li>
                             <li><a href="#contacts">Contacts</a></li>
                        </ul>
                     </nav>
            </div><!-- Container ends here -->
        </header> <!-- Header / Navigation ends here -->
    
    
        <div class="topsection">
            <section class="about-me container" data-aos="fade-up" id="about">
                    <h3>Hello, this is <span>some text.</span> <br>I love text.</h3>
                    <p>Some more text.</p>
                    <p>And a lot of text.</p>
                </section>
        </div><!-- About ends here -->
        
    <div class="middlesection">
      <section id="portfolio" data-aos="fade-down" class="container">
          <h3>portfolio</h3>
          <ul class="portfolio">
          <li class="work">  
     <div class="work-text">    
      <h6>Project</h6>  
      <img src="image" alt="img" />  
      <p>Description</p>  
      <a href="" target="_blank">Link</a>  
    </div>  
  </li>  
  <li class="work">  
     <div class="work-text">    
      <h6>Project</h6>  
      <img src="image" alt="img" />  
      <p>Description</p>  
      <a href="" target="_blank">Link</a>  
    </div>  
  </li> 
         <li class="work">  
     <div class="work-text">    
      <h6>Project</h6>  
      <img src="image" alt="img" />  
      <p>Description</p>  
      <a href="" target="_blank">Link</a>  
    </div>  
  </li> 
  <li class="work">  
     <div class="work-text">    
      <h6>Project</h6>  
      <img src="image" alt="img" />  
      <p>Description</p>  
      <a href="" target="_blank">Link</a>  
    </div>  
  </li> 
         <li class="work">  
     <div class="work-text">    
      <h6>Project</h6>  
      <img src="image" alt="img" />  
      <p>Description</p>  
      <a href="" target="_blank">Link</a>  
    </div>  
  </li> 
         <li class="work">  
     <div class="work-text">    
      <h6>Project</h6>  
      <img src="image" alt="img" />  
      <p>Description</p>  
      <a href="" target="_blank">Link</a>  
    </div>  
  </li> 
     <li class="work">  
     <div class="work-text">    
      <h6>Project</h6>  
      <img src="image" alt="img" />  
      <p>Description</p>  
      <a href="" target="_blank">Link</a>  
    </div>  
  </li> 
         <li class="work">  
     <div class="work-text">    
      <h6>Project</h6>  
      <img src="image" alt="img" />  
      <p>Description</p>  
      <a href="" target="_blank">Link</a>  
    </div>  
  </li> 
</ul>
          
<!-- End hidden content -->
          <div class="seemore-link"><!-- Hidden only on tablet/desktop view-->
            <a href="portfolio.html">See more</a>
          </div>
        </section>
    </div>
        
        <footer class="bottomsection">
        <section id="contacts" class="container" data-aos="fade-right" >
            <h3>contacts</h3>
            <div class="contacts">
                <div class="pic-cv">
                    <div class="piccv-text">    
                     <img src="img/pic.jpg" alt="image" />  
                         <p>Have any question? Please get in touch.<br><span>Email:</span> thisemail@gmail.com</p>   
                     </div>  
                    </div>
                    <div id="form" class="form">
                      <h6>Ask Info</h6>
                        <form method="post" action="http://web-domain.com/cgi-bin/formmail.cgi" onsubmit="return checkform(this);">
                        <label class="required" for="email">Email:</label>
                        <input type="email" required="required" value="email address">
                        <label class="required" for="text">Message:</label>
                        <!--<input type="text" "required" value="message">-->
                        <textarea name="text" cols="48" rows="5" required="required">message</textarea> 
                            
                                        
                            <input type="submit" value="send"></form>
                        <!--Form ends here-->
                    </div>
                 <div class="pic-cv">  
                    <div id="socials" class="piccv-text">  
                        <h6>Social</h6>
                        <div class="social-icons">
                         <p><a href="link.com" target="_blank"><i class="icon"></i></a></p>
                                <p><a href="link.com" target="_blank"><i class="icon"></i></a></p>
                        </div>  
                    </div>
                </div> 
                </div>
                </section><!-- Contacts ends here -->
            <p class="copyright"> Copyright © Name and Last Name</p>
            
        </footer>


</body>

Thank you so much for any help provided.