@media screen and (min-width: 0px) {
  #landing-2 {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 10rem 0 0;
    background-image: url("/img/svg/line-footer.svg"),
      url("/img/svg/blur-background.svg");
    background-size: contain, 34rem;
    background-position: bottom center, top -17rem left -10rem;
    background-repeat: no-repeat, no-repeat;
  }
  #landing-2 .box {
    width: 90%;
    max-width: 90rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  #landing-2 .title-box {
    margin-bottom: 1rem;
  }
  #landing-2 .title-box h1 {
    padding: 0;
    line-height: 2.4rem;
    overflow-y: hidden;
    font-size: var(--title-size-1);
  }
  #description {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 7rem 0;
  }

  #description .box {
    width: 90%;
    max-width: 61.3125rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #description .title {
    width: 100%;
    max-width: 41.3125rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  #description .title-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #description .title picture {
    width: 100%;
    max-width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

  }
  #description .title picture img {
    width: 100%;
    max-width: 450px;
    object-fit: cover;
    object-position: center;

    border-radius: var(--border-radius-1);
    border: var(--blue-color-3) solid 5px;
  }
  #description .title picture p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: hidden;
    
    margin: 1rem 0 2rem;
    line-height: 100%;
  }
  #description .title picture p span {
    font-weight: 600;
    padding: 0.3rem 0;
    color: var(--text-color-2);
    overflow-y: hidden;
  }
  #description .text {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #description .text h4 {
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.7rem;
    overflow-y: hidden;

    margin-bottom: 1rem;
    border-left: var(--blue-color-2) solid 2px;
    padding-left: 1rem;
  }
  #description .text p {
    margin-bottom: 2rem;
  }
  #certificados {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 10rem;
  }
  #certificados .box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #certificados .title {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 7rem 0 10rem;
    background-image: url("/img/svg/blur-background.svg");
    background-position: top -4rem left -9rem;
    background-size: 34rem;
    background-repeat: no-repeat;
    background-color: var(--blue-color-4);
  }
  #certificados .title-box {
    width: 90%;
    max-width: 100rem;
  }
  #certificados .title h2 {
    font-weight: 500;
  }
  #certificados .cards {
    width: 90%;
    max-width: 97rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    margin-top: -7rem;
    padding: 1rem;
    gap: 2rem;
  }
  #certificados .card {
    width: 100%;
    max-width: 37.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 2rem;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.25),
      4px 4px 11px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(19px);
    border-radius: var(--border-radius-1);
    background: rgba(27, 56, 94, 0.38);
  }
  #certificados .card img {
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  #certificados .card p:first-of-type {
    color: var(--blue-color-2);
    margin-top: 1rem;
  }
  #certificados .card h3 {
    margin-top: 0;
    line-height: 1.6rem;
    overflow-y: hidden;
    padding-bottom: 0.2rem;
  }
  #certificados .card > p {
    margin-top: 1rem;
    font-size: var(--text-size-1-m);
    line-height: 1.4rem;
  }
  #certificados .card button {
    margin-top: 2rem;
    align-self: flex-end;
  }
  #certificados .card button a {
    border: none;
    padding: 0;
    border-bottom: var(--blue-color-2) solid 1px;
    padding-bottom: 0.2rem;
    border-radius: 0;
    transition: ease 0.2s;
  }
  #certificados .card button a:hover {
    color: var(--blue-color-2);
    background-color: transparent;
  }
  #servicios {
    padding: 7rem 0 0;
  }
  #servicios .box {
    padding-bottom: 13rem;
    background-position: top left -4rem, bottom right;
  }
  #servicios .background-none {
    background-image: none;
  }
  #blog1 {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 10rem 0;
    background-image: url("/img/svg/blur-background.svg"),
      url("/img/svg/blur-background.svg");
    background-position: top right, bottom left;
    background-size: 40rem, 40rem;
    background-repeat: no-repeat;
  }
  #blog1 .box {
    width: 90%;
    max-width: 79.3125rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 4rem;
  }
  #blog1 .posts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 4rem;
  }
  #blog1 article {
    width: 100%;
    max-width: 50.625rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 2rem;
  }
  #blog1 article > img:first-of-type {
    width: 100%;
    max-height: 24.25rem;
    object-fit: cover;
    object-position: center;
    border-radius: var(--border-radius-1);
  }
  #blog1 article .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 2rem;
    background: linear-gradient(var(--blue-color-1), var(--blue-color-1))
        padding-box,
      linear-gradient(to bottom right, var(--blue-color-2), transparent)
        border-box;
    border: 1px solid transparent;
    background-color: var(--blue-color-7);
    border-radius: var(--border-radius-1);
  }
  #blog1 article .tags {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    gap: 1rem;
    margin-bottom: 0.5rem;
  }
  #blog1 article .tags p {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 0.5rem;
  }
  #blog1 article .line-break {
    width: 100%;
    height: 10px;
    background-image: url("/img/svg/line-footer.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 1rem 0;
  }
  #blog1 article .title button {
    margin-top: 1rem;
  }
  #blog1 aside {
    width: 100%;
    max-width: 29.75rem;
  }
  #blog1 aside article {
    width: 100%;
    padding: 2rem;
    margin-bottom: 2rem;
    gap: 0;
    background: linear-gradient(var(--blue-color-1), var(--blue-color-1))
        padding-box,
      linear-gradient(to bottom right, var(--blue-color-2), transparent)
        border-box;
    border: 1px solid transparent;
    background-color: var(--blue-color-7);
    border-radius: var(--border-radius-1);
  }
  #blog1 aside article .tags {
    margin-bottom: 0;
  }
  #blog1 aside h3 {
    margin-bottom: 2rem;
  }
  #blog1 aside article .tags {
    margin-bottom: 0.5rem;
  }
  #blog1 aside article .tags p {
    font-size: var(--text-size-2-m);
  }
  #blog1 aside article a {
    font-size: var(--text-size-1);
    font-weight: 600;
  }
  #blog1 aside .banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    background: linear-gradient(var(--blue-color-1), var(--blue-color-1))
        padding-box,
      linear-gradient(to bottom right, var(--white-color-2), transparent)
        border-box;
    border: 1px solid transparent;
    background-color: var(--blue-color-7);
    border-radius: var(--border-radius-1);
  }
  #blog1 aside .banner p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    color: var(--white-color-1);
  }
  #blog1 aside .banner p span {
    font-weight: 300;
    font-size: var(--text-size-1-m);
  }
  #blog1 aside .banner a {
    color: var(--blue-color-2);
  }
  #blog1 aside .banner a:hover {
    text-decoration: underline;
  }
 
  #servicio #blog1 .box aside article {
    padding: 1rem;
  }
  #servicio #blog1 .box aside article a {
    margin: 0;
    line-height: 1.4rem;
    font-size: var(--text-size-1);
  }
  #servicio #blog1 aside {
    max-width: 23rem;
  }
  #servicio #blog1 .box aside article img {
    width: 4rem;
  }
  #servicio #blog1 aside article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 1rem;
  }
  #servicio #blog1 aside article a {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    gap: 2rem;
    font-size: var(--subtitle-size-1);
  }
  #servicio #blog1 aside article .line-break {
    padding: 0;
  }
  #servicio #blog1 .posts article :is(ol, ul) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  #servicio #blog1 .posts article :is(ol li, ul li) {
    list-style-type: decimal;
    list-style-position: inside;
    color: var(--blue-color-2);
    font-weight: 600;
  }
  #servicio #blog1 .posts article ol li a {
    font-weight: 300;
  }
  #servicio #blog1 .posts article ul li {
    color: var(--white-color-2);
    list-style-type: disc;
    font-weight: 400;
    font-size: var(--text-size-1);
  }
  #servicio #blog1 .posts article h3 {
    margin-bottom: 0.5rem;
  }
  #servicio #blog1 .posts article p {
    margin-bottom: 1rem;
  }
  #post #landing-2 .title-box p:last-of-type,
  #servicio #landing-2 .title-box p:last-of-type {
    color: var(--white-color-1);
    font-weight: 600;
    font-size: var(--title-size-1);
    margin-top: 0.2rem;
    padding-bottom: 0.4rem;
  }
  #post #blog1 h1,
  #servicio #blog1 h1 {
    font-size: 2rem;
    color: var(--white-color-1);
    line-height: 2.4rem;
    overflow-y: hidden;
  }
  #post #blog1 h2,
  #servicio #blog1 h2 {
    color: var(--white-color-1);
    font-size: 1.4rem;
    line-height: 1.7rem;
    font-weight: 500;

    margin: 1rem 0;
  }
  #post #blog1 h3 {
    font-size: 1.3rem;
    line-height: 1.4rem;
    font-weight: 400;
    padding-bottom: 0.2rem;
    margin-bottom: 0.5rem;
  }
  #post #blog1 em {
    color: var(--text-color-2);
    font-size: var(--text-size-1);
  }
  #post #blog1 .posts article p {
    margin-bottom: 1rem;
  }
  #post #blog1 p span {
    font-weight: 400;
    color: var(--text-color-2);
  }
  #post #blog1 .posts article :is(ul, ol) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    gap: 1rem;
    margin-bottom: 1rem;
  }
  .mt-1 {
    margin-top: 1rem;
  }
  #post #blog1 .posts article ul li {
    list-style-type: disc;
    list-style-position: inside;
    font-size: 1.1rem;
    line-height: 1.7rem;
    overflow-y: hidden;
  }
  #post #blog1 .posts article ul li span.code {
    background-color: #242424;
    padding: 0.2rem;
    font-weight: 400;
    border-radius: var(--border-radius-1);
  }
  #post #blog1 .posts article ol li {
    list-style-type: decimal;
    list-style-position: inside;
    font-size: 1.1rem;
    line-height: 1.7rem;
    overflow-y: hidden;
  }
  #post #blog1 .posts article :is(code, ol code, ul code) {
    text-align: start;
    word-wrap: break-word;
    word-break: break-all;
    color: var(--white-color-2);
    background-color: #242424;
    padding: 1rem;
    border-radius: var(--border-radius-1);
    font-size: var(--text-size-1);
  }
  #post #blog1 .posts article ul li span {
    font-weight: 600;
    color: var(--white-color-1);
  }
  #construccion .construccion-banner {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10rem 0;
  }
  #construccion .construccion-banner .box {
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: var(--border-radius-1);
  }
  #construccion .construccion-banner .box p {
    font-size: 2rem;
    font-weight: 600;
    color: var(--white-color-1);
    text-align: center;

    margin: 1rem;
  }
  #construccion .construccion-banner .box img {
    width: 100%;
    max-width: 40rem;
  }
}

@media screen and (min-width: 1000px) {
  #certificados .card {
    max-width: 27.5rem;
  }
  #blog1 .box {
    flex-direction: row;
    align-items: flex-start;
  }
  #servicio #blog1 .box {
    flex-direction: row-reverse;
  }
  #servicio #blog1 .posts {
    width: 60%;
    max-width: fit-content;
  }
  #servicio #blog1 .box aside {
    width: 34%;
    max-width: 20rem;
  }
}
@media screen and (min-width: 1700px) {
  #certificados .cards {
    gap: 4rem;
  }
}