* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: "Inter", sans-serif;
    transition: all 0.4s; 
  }
  :root {
    --color1: #faeed6;
    --color2: #e9ab57;
    --color3: #3d1d0d; 
    --colorFondo: #faeed6;
    --colorLetras: #e9ab57;
  }
  body {
    background-color: var(--colorFondo);
    color: var(--colorLetras);
  }
  .Title {
    font-size: 9pc;
  }
  .SubTitle {
    font-size: 3pc;
  }
  .container {
    border: 1px ; 
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100vh;
  }
  section {
    width: 95%;
    border: 1px;
    position: absolute;
  }
  .Retangle1,
  .Retangle4 {
    background-color: red; 
    width: 520px;
    height: 230px;
    border-radius: 22px;
  }
  .Retangle2,
  .Retangle3 {
    border-radius: 22px;
    background-color: blue;
    width: 273px;
    height: 230px;
  }
  .Containers {
    display: flex;
    flex-wrap: wrap;
    border: 1px;
    width: 70%;
    margin-right: 3pc;
    gap: 1pc;
  }
  button {
    padding: 0.6pc 1pc;
    border-radius: 22px;
    border: 1px solid;
    background-color: var(--colorLetras);
    color: var(--colorFondo);
    font-size: 1.4pc;
    cursor: pointer;
  }
  
  button:hover {
    background-color: var(--colorFondo);
    color: var(--colorLetras);
  }
  
  .Retangle1 {
    background-image: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.489),
        rgba(0, 0, 0, 0.489)
      ),
      url(./img/oblea1.png)
  }
  .Retangle2 {
    background-image: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.489),
        rgba(0, 0, 0, 0.489)
      ),
      url(./img/oblea2.png);
  }
  .Retangle3 {
    background-image: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.489),
        rgba(0, 0, 0, 0.489)
      ),
      url(./img/oblea3.png);
  }
  .Retangle4 {
    background-image: radial-gradient(
        circle,
        rgba(0, 0, 0, 0.489),
        rgba(0, 0, 0, 0.489)
      ),
      url(./img/oblea4.png);
  }

@media screen and (max-width:500px) {
  .Title{
    font-size: 3pc;
  }
  button{
    font-size: 1pc;
    padding: 0.4pc 0.6pc;
  }
  .Retangle2, .Retangle3{
    width: 144px;
    height: 144px;
  }
  .Containers{
    width: 100%;
    margin: 0;
    justify-content: center;
  }
  .Retangle1, .Retangle4{
    width: 180px;
    height: 144px;
  }
  .container{
    align-items: flex-end;
    padding-bottom: 4pc;
    height: 90vh;
  }
  section{
    top: 4pc;
  }
}