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

#SW04-01 * {
  font-family: 'Roboto', sans-serif;
}


#SW04-01 {
  padding: 60px 10%;
  background-color: rgb(248, 248, 248);
}
#SW04-01 > h2 {
  color: rgb(44,63,78);
  font-size: 2rem;
  letter-spacing: 0.3rem;
  margin-top: 0;
  margin-bottom: 30px;
}


.SW04-01-grid {
  padding-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 30px;
  row-gap:60px;
}

.SW04-01-card {
  height: 100%;
  border-radius: 10px;
  background: rgb(248, 248, 248);
box-shadow:  6px 6px 12px #ced1d4,
             -6px -6px 12px #ffffff;
  padding: 10px;
}

.SW04-01-img {
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.SW04-01-img img {
  width: 60%;
  object-fit: contain;
  /* transform: translateY(-15%); */
}

.SW04-01-card>h3 {
  text-align: center;
  color: rgb(42, 29, 138);
  margin-bottom: 0;
  font-size: 1.4rem;
}
.SW04-01-card>p {
  text-align: center;
  color: #888;
  margin-top: 10px;
}
.SW04-01-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.SW04-01-btn a {
  text-decoration: none;
  color: #444;
  border-radius: 50px;
  padding: 5px 20px;
  background-color: rgb(248, 248, 248);
  font-weight: bold;
  box-shadow:  2px 2px 4px #ced1d4,
               -2px -2px 4px #ffffff;

}
.SW04-01-btn a:hover {
  background-color: rgb(238,238,238);
}
.SW04-01-grid > a {
  text-decoration: none;
}
.SW04-01-img img {
  width: 80%;
  object-fit: contain;
  /* transform: translateY(-5%); */
}

@media(max-width:576px) {
  .SW04-01-grid {
    padding-top: 70px;
  }
  #SW04-01 > h2 {
    font-size: 1.6rem;
  }
  .SW04-01-card>h3 {
    font-size: 1.1rem;
  }
  .SW04-01-card>p {
    font-size: 0.8rem;
  }
}