body{ padding-top: 4rem; } .Media-box{ padding: 3rem 4rem; h1{ font-family: Gilroy-Bold; font-size: 3.846rem; font-weight: normal; letter-spacing: 0rem; color: #313131; &::first-letter{ color: #f08200; } } h6{ font-family: Gilroy-Regular; font-size: 0.846rem; font-weight: normal; font-stretch: normal; line-height: 1.154rem; letter-spacing: 0rem; color: #313131; } } .downloads{ display: grid; grid-template-columns: repeat(2,1fr); gap: 3rem; padding: 3rem 0; li{ background-color: #f4f4f6; border-radius: 1.538rem; padding: 1.6rem 3rem; display: flex; gap: 3rem; img{ width: 5.346rem; } h3{ font-family: Gilroy-Bold; font-size: 1.385rem; font-weight: normal; font-stretch: normal; line-height: 1.846rem; letter-spacing: 0rem; color: #313131; } p{ font-family: Gilroy-Regular; font-size: 0.692rem; font-weight: normal; font-stretch: normal; line-height: 1.154rem; letter-spacing: 0rem; color: #7d7d7d; padding: 1rem 0; } .btn{ display: inline-block; height: 2.308rem; padding: 0 1rem; border-radius:1.15rem; background-color: #ffffff; font-family: Gilroy-Bold; font-size: 0.692rem; font-weight: normal; font-stretch: normal; line-height: 2.308rem; letter-spacing: 0.069rem; color: #313131; transition: all .3s ease; span{ padding-left: 1rem; } } transition: all .3s ease; &:hover{ background-color: #fff; box-shadow: 0rem 0.385rem 2.308rem 0rem rgba(0, 0, 0, 0.08); .btn{ background-color: #f08200; color: #fff; } } } } @media (max-width: 1024px) { .downloads{ gap: 2rem; grid-template-columns: repeat(1, 1fr); } } @media (max-width: 640px) { body{ padding-top: 2rem; } .Media-box{ padding: 1rem; } .downloads li{ flex-direction: column; padding: 1rem; gap: 2rem; img{ width: unset; max-width: 100%; margin: 0 auto; } } .downloads li .btn{ margin-bottom: 1rem; } }