IuryNogueira/myreef

.container {
  display: flex;
  height: 100%;
  width: 100%;
  background: rgb(75,165,184);
  background: linear-gradient(90deg, rgba(75,165,184,1) 46%, rgba(199,162,165,1) 76%, rgba(245,130,154,1) 95%);
  color: #eefeff;
}
 
.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  // padding: 16px 32px;
}
 
.content-inner {
  padding: 60px 80px;
 
  display: flex;
  flex-direction: column;
  gap: 100px;
}
 
.welcome-banner {
  display: flex;
}
 
.left {
  width: 50%;
}
 
.right {
  width: 50%;
 
  img {
    width: auto;
  }
}
 
.title {
  font-size: 60px;
  font-weight: 600;
}
 
.reef-shape {
  background-image: url('/images/reef-shapes.png');
  height: 345px;
  background-repeat: no-repeat;
  background-position: right;
 
  div {
    max-width: 50%;
  }
}
 
p {
  color: #cfffff;
}
 
.aqua-info {
  padding: 1rem 0px;
}
 
.data-infos {
  display: flex;
  width: 100%;
  gap: 1rem;
  padding: 2rem 0px;
  flex-direction: row;
 
  div {
    width: 100%;
  }
}
 
.sensors-grid-container {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
 
reef-chart {
  max-width: 650px;
}
 
.row-charts {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
 
@media screen and (max-width: 1000px) {
  .content-inner {
    padding: 60px 20px;
  }
}
 
@media screen and (max-width: 800px) {
  .data-infos {
    flex-direction: column;
  }
}
 
@media screen and (max-width: 650px) {
  reef-menu {
    position: relative;
  }
 
  .content-inner {
    gap: 0px;
  }
 
  .reef-shape {
    background-image: none;
    display: flex;
    justify-content: center;
    text-align: center;
  }
 
  .title {
    font-size: 20px;
  }
}