Responsive Meet landing page

What are you most proud of, and what would you do differently next time?

I'm very proud of using ```clamp()`` to dynamically resize the width and height of images.

What challenges did you encounter, and how did you overcome them?

Splitting the desktop image in half.

  
    
  
  
  
  
  
    
    Group Chatfor Everyone
    
    Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.
    
    
      Download v1.3
      What is it?
    
    
  
  
  
  

.hero__image {
  overflow-x: hidden;
}

.hero__img {
  height: clamp(10rem, 1.4719rem + 36.3868vw, 18.9375rem);

  &[src*=desktop] {
    display: none;
  }
}

@include mobile-media-query(1150px) {
  .hero {
    max-width: rem(1362px);
    grid-auto-flow: column;
    margin-inline: auto;
    position: relative;
  }
  
  .hero__image {
    display: none;
  }
  
  .hero__img {
    &[src*=desktop] {
      position: absolute;
      display: block;
      height: clamp(18.9375rem, 1.125rem + 23.75vw, 22.5rem);
    }

    &[src*=left] {
      left: clamp(-4.875rem, -14.625rem + -21.6667vw, -1.625rem);
    }

    &[src*=right] {
      right: clamp(-4.875rem, -14.625rem + -21.6667vw, -1.625rem);
    }
  }
}

What specific areas of your project would you like help with?

I want to get the background overlay color right for the footer.

I'm currently using a background-image property in combination with a ::before element with a background color with opacity, but doing so did not get me the exact color from the design.

.footer__content {
  position: relative;
  place-items: center;
  row-gap: var(--s-300);
  margin-block-start: rem(108px);
  padding: var(--s-800) var(--s-300);
  width: 100%;
  height: rem(392px);
  background-image: url(../images/mobile/image-footer.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--cyan-600-overlay);
  }
}