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

    background-image: url("/img/photos-img/landing-2-m.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  #proyecto .balcones {
    background-image: url("/img/photos-img/landing-2-bg/balcones.png");
  }
  #proyecto .arizala {
    background-image: url("/img/photos-img/landing-2-bg/arizala.png");
  }
  #proyecto .victorias {
    background-image: url("/img/photos-img/landing-2-bg/victorias.png");
  }
  #proyecto .ambala {
    background-image: url("/img/photos-img/landing-2-bg/ambala.png");
  }
  #proyecto .mariquita {
    background-image: url("/img/photos-img/landing-2-bg/mariquita.png");
  }
  #proyecto .restrepo {
    background-image: url("/img/photos-img/landing-2-bg/restrepo.png");
  }
  #proyecto .monterrey {
    background-image: url("/img/photos-img/landing-2-bg/monterrey.png");
  }
  #proyecto .rovira {
    background-image: url("/img/photos-img/landing-2-bg/rovira.png");
  }
  #proyecto .filadelphia {
    background-image: url("/img/photos-img/landing-2-bg/filadeplhia.png");
  }
  #proyecto .helena {
    background-image: url("/img/photos-img/landing-2-bg/helena.png");
  }
  #proyecto .edificio {
    background-image: url("/img/photos-img/landing-2-bg/edificio.png");
  }
  #proyecto .macarena {
    background-image: url("/img/photos-img/landing-2-bg/macarena.png");
  }
  #proyecto .club-pintada {
    background-image: url("/img/photos-img/landing-2-bg/club-pintada.png");
  }
  #proyecto .simetria {
    background-image: url("/img/photos-img/landing-2-bg/simetria.png");
  }
  #proyecto .tango {
    background-image: url("/img/photos-img/landing-2-bg/tango.png");
  }
  #proyecto .augurio {
    background-image: url("/img/photos-img/landing-2-bg/augurio.png");
  }
  #proyecto .dulima {
    background-image: url("/img/photos-img/landing-2-bg/dulima.png");
  }
  #landing-2 .box {
    width: 90%;
    max-width: 81rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 13rem 0 2.5rem;
  }
  #landing-2 :is(h1, h2, p) {
    font-weight: 300;
    font-size: var(--title-size-1);
    border-left: var(--tag-color-1) solid 2px;
    padding-left: 0.5rem;
  }
  #landing-2 :is(h1 span, h2 span, p span) {
    font-weight: 700;
    color: var(--tag-color-1);
  }
  #landing-2 .base-line {
    width: 100vw;
    height: 5rem;
    background-image: url("/img/icons/landing-base-line.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  #profile {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 7rem 0 10rem;
  }
  #profile .box {
    width: 90%;
    max-width: 83.9375rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 4rem;
  }

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

  #profile .title-box {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    margin-bottom: 2rem;
  }
  #profile .title-box h2 {
    font-size: var(--title-size-1-m);
    border-left: var(--tag-color-1) solid 2px;
    padding-left: 0.5rem;
  }
  #profile .title-box h3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: var(--white-color);
    font-size: var(--text-size-1);
    font-weight: 500;
    margin-top: 0.5rem;
  }
  #profile .title-box h3 span {
    color: var(--tag-color-1);
  }
  #profile .title > p {
    font-size: var(--text-size-1-m);
    margin-bottom: 1rem;
  }
  #profile button {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #profile button a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 0.5rem;
    padding: var(--button-padding-1);
    background-color: var(--white-color);
    color: var(--dark-color-1);
    border-radius: var(--button-rounded-1);
    font-size: var(--text-size-1-m);
  }
  #profile button a:hover {
    background-color: var(--white-color-2);
  }
  #profile .box picture {
    width: 100%;
    max-width: 34.625rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #profile .box picture img {
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  #acercade-1 .acercade-base-box {
    padding-bottom: 7rem;
  }
  #portafolio {
    padding-bottom: 17rem;
  }
  #portafolio h2 {
    margin-top: 5rem;
    font-size: 2.4rem;
  }
  #portafolio .portafolio-text button {
    margin-top: 0.2rem;
    align-self: flex-start;
  }
  #portafolio .portafolio-text-button {
    margin-top: 2rem;
    align-self: flex-start;
  }
  #servicios {
    padding-bottom: 17rem;
    background-image: url("/img/icons/acercade-base-background.svg");
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  #contacto {
    padding-bottom: 13rem;
  }

  #blog {
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 7rem 0 13rem;
    background-image: url("/img/icons/base-background.svg");
    background-position: bottom center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  #blog > .box {
    width: 100%;
    max-width: 83.125rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 4rem;
  }
  #blog .posts {
    width: 90%;
    max-width: 43.125rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 4rem;
  }
  #blog .posts article {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 2rem;
    border-radius: var(--button-rounded-1);
    background: linear-gradient(#1d1d1d, #1d1d1d) padding-box,
      linear-gradient(to bottom, #7a7a7a, transparent) border-box;
    border: 1px solid transparent;
  }
  #blog .posts picture {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #blog .posts img {
    width: 100%;
    height: 20.53506rem;
    object-fit: cover;
    object-position: center;
  }
  #blog .posts article p:first-of-type {
    color: var(--tag-color-1);
    margin-top: 1rem;
    font-size: var(--text-size-1-m);
  }
  #blog .posts article h2 {
    font-size: var(--title-size-1-m);
    line-height: 1.7rem;
    overflow-y: hidden;
  }
  #blog .post article h4 {
    display: list-item;
    font-size: var(--text-size-1);
    font-weight: 500;
    color: var(--white-color-2);
    list-style-type: disc;
    list-style-position: inside;
    margin-bottom: 0.5rem;
  }
  #blog .posts article p {
    margin-top: 1.5rem;
    font-size: var(--text-size-1-m);
    color: var(--text-color-2);
  }
  #blog .posts button {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #blog .posts button a {
    border-left: var(--tag-color-1) solid 2px;
    padding-left: 0.5rem;
    font-size: var(--text-size-1);
    
    margin-top: 0.5rem;
    transition: ease 0.2s;
  }
  #blog .posts button a:hover {
    color: var(--tag-color-1);
  }
  #blog aside {
    width: 90%;
    max-width: 29.1875rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  #blog aside h3 {
    font-size: var(--text-size-1);
    border-left: var(--tag-color-1) solid 2px;
    padding-left: 0.5rem;
    margin-bottom: 2rem;
    font-weight: 300;
  }
  #blog aside h3 span {
    font-weight: 600;
  }
  #blog aside article {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: var(--button-rounded-1);
    border: var(--gray-color-1) solid 1px;
  }
  #blog aside article img {
    width: 100%;
    height: 7rem;
    object-fit: cover;
    object-position: center;
    border-radius: var(--button-rounded-1);
  }
  #blog aside article .title {
    width: 100%;
  }
  #blog aside .title h4 {
    font-size: var(--text-size-1-m);
    font-weight: 500;
    line-height: 1.4rem;
    overflow-y: hidden;
    color: var(--text-color-2);
  }
  #blog aside .title button {
    margin-top: 0.5rem;
  }
  #blog aside .title a {
    color: var(--text-color-1);
    border-left: var(--tag-color-1) solid 1px;
    padding-left: 0.5rem;
    font-size: var(--text-size-1-m);
    transition: ease 0.2s;
  }
  #blog aside .title a:hover {
    color: var(--tag-color-1);
  }
  #blog aside .banner {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    padding: 1rem;
    margin-top: 2rem;
    background-color: var(--gray-color-2);
    border-radius: var(--button-rounded-1);
  }
  #blog aside .banner .box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
    border: var(--gray-color-1) solid 1px;
    border-radius: var(--button-rounded-1);
  }
  #blog aside .banner .box img {
    width: 100%;
    max-width: 16rem;
  }
  #blog aside .banner p:first-of-type {
    font-size: var(--text-size-1);
    color: var(--white-color);
    font-weight: 600;
    margin-top: 1rem;
  }
  #blog aside .banner p:last-of-type {
    margin-top: 1rem;
    font-size: var(--text-size-1-m);
    font-weight: 400;
    color: var(--white-color-2);
  }
  #blog aside .banner a {
    font-size: var(--text-size-1);
    color: var(--tag-color-1);
    margin-top: 0.5rem;
  }
  #blog aside .banner a:hover {
    text-decoration: underline;
  }
  #blog .nav {
    width: 90%;
    max-width: 83rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    
    gap: 1rem;
    margin-top: 4rem;
  }
  #blog .nav a {
    width: 3rem;
    height: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    font-size: var(--text-size-1);
    background-color: var(--gray-color-2);
    color: var(--text-color-1);
    font-weight: 400;
    transition: ease 0.2s;
  }
  #blog .nav .selected {
    background-color: var(--tag-color-1);
    color: var(--text-color-1);
  }
  #blog .nav a:hover {
    background-color: var(--tag-color-1);
    color: var(--text-color-1);
  }
  #blog .post {
    width: 90%;
    max-width: 46.4375rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #blog .post article {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  #blog .post picture {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    border-radius: var(--button-rounded-1);
  }
  #blog .post picture img {
    width: 100%;
    height: 24rem;
    object-fit: cover;
    object-position: center;
  }
  #blog .post p:first-of-type {
    color: var(--tag-color-1);
    font-size: var(--text-size-1-m);
    margin-top: 1rem;
    margin-bottom: 0;
  }
  #blog .post h2 {
    font-weight: 500;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    color: var(--text-color-1);
    border-left: var(--tag-color-1) solid 2px;
    padding-left: 0.5rem;
  }
  /* #blog .post h2 span {
    font-weight: 600;
  } */
  #blog .post p {
    font-size: var(--text-size-1-m);
    color: var(--text-color-2);
    margin-bottom: 1.5rem;
  }
  #blog .post p a {
    font-weight: 600;
    text-decoration: underline;
    color: var(--tag-color-1);
  }
  #blog .post ul li a {
    color: var(--text-color-1);
    transition: ease 0.2s;
  }
  #blog .post ul li a:hover {
    color: var(--tag-color-1);
  }
  #blog .post h3 {
    font-weight: 500;
    font-size: var(--text-size-1);
    margin-bottom: 0.5rem;
    color: var(--white-color-2);
  }
  #blog .post article .tabla-contenido {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--dark-color-2);
    padding: 2rem;
    border-radius: var(--button-rounded-1);
  }
  /* #blog .post article h3 {
    margin-top: 1rem;
  } */
  #blog .post button {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #blog .post button a {
    font-size: var(--text-size-1-m);
    transition: ease 0.2s;
    background-color: var(--white-color);
    color: var(--dark-color-1);
    border-radius: var(--button-rounded-1);
    padding: var(--button-padding-1);
  }
  #blog .post button a:hover {
    background-color: var(--tag-color-1);
    color: var(--text-color-1);
  }
  #post1 .box .post article h1 {
    font-size: var(--title-size-1);
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    color: var(--text-color-1);
    border-left: var(--tag-color-1) solid 2px;
    padding-left: 0.5rem;;
  }
  #post1 .box .post article h2 {
    border-left: none;
    padding-left: 0;
    margin-bottom: 1rem;
  }
  #post1 .box .post article ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  #post1 .box .post article li {
    font-size: var(--text-size-1-m);
    color: var(--text-color-2);
    list-style-type: disc;
    list-style-position: inside;
  }
  #post1 .box .post article li span {
    font-weight: 700;
    color: var(--white-color);
  }
  #post1 .box .post .img-mb {
    margin-bottom: 1rem;
  }
  #proyecto .post h1 {
    font-weight: 300;
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  #proyecto .post h1 span {
    font-weight: 600;
  }
  #proyecto .post p:first-of-type {
    margin-top: 0;
    margin-bottom: 2rem;
  }
  #proyecto .post picture {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    
    gap: 0.5rem;
    border-bottom: var(--gray-color-1) solid 1px;
    padding-bottom: 2rem;
  }
  #proyecto .post picture img:first-of-type {
    width: 100%;
    border-radius: var(--button-rounded-1);
  }
  #proyecto .post picture > img {
    width: 49%;
    border-radius: var(--button-rounded-1);
  }
  #proyecto .post h3.subtitle {
    margin-top: 1rem;
    color: var(--tag-color-1);
    font-size: 1.7rem;
  }
  #proyecto .post video {
    width: 100%;
    display: block;
    margin-bottom: 1rem;
  }
  #proyecto aside article .title {
    max-width: 13rem;
  }

  #servicio #blog h1 {
    font-size: var(--title-size-1);
    font-weight: 300;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-left: var(--tag-color-1) solid 1px;
    padding-left: 0.5rem;
  }
  #servicio #blog h1 span {
    font-weight: 600;
  }
  #servicio #blog .post article p:first-of-type {
    color: var(--text-color-2);
    margin-top: 0;
    margin-bottom: 1rem;
  }
  #servicio #blog aside .wrapper {
    border: var(--text-color-2) solid 1px;
    border-radius: var(--button-rounded-1);
    padding: 2rem;
  }
  #servicio #blog aside .items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    gap: 1rem;
  }
  #servicio #blog aside .items a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 1rem;
    font-size: var(--text-size-1-m);
    border: var(--text-color-2) solid 1px;
    padding: var(--button-padding-1);
    border-radius: var(--button-rounded-1);
    transition: ease 0.2s;
  }
  #servicio #blog aside .items a:hover {
    border: var(--tag-color-1) solid 1px;
    background-color: var(--tag-color-1);
    color: var(--text-color-1);
  }
  #servicio ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  #servicio ul li {
    list-style-type: disc;
    list-style-position: inside;
  }
}
@media screen and (min-width: 443px) {
  #blog aside article img {
    max-width: 7.5rem;
  }
  #blog aside .title {
    max-width: 14rem;
  }
}
@media screen and (min-width: 900px) {
  #profile .box {
    flex-direction: row;
  }
  #blog > .box {
    align-items: flex-start;
    /* flex-direction: row; */
    padding: 2rem;
  }
  #servicio #blog > .box {
    flex-direction: row-reverse;
  }
}

@media screen and (min-width: 929px) {
  #blog > div:first-of-type {
    flex-direction: row;
  }
  #blog > div:is(.row-reverse) {
    flex-direction: row-reverse;
  }
}