diff --git a/assets/styles/styles.css b/assets/styles/styles.css index 2b1d94f..95785e5 100644 --- a/assets/styles/styles.css +++ b/assets/styles/styles.css @@ -207,6 +207,52 @@ header { display: none; } +@media (min-width: 1920px) { + .top-cards-container { + display: flex; + } + + .bottom-cards-container { + display: flex; + } +} + +@media (min-width: 1623px) and (max-width: 1912px) { + .top-cards-container { + width: 75%; + } +} + +@media (min-width: 1264px) and (max-width: 1622px) { + .top-cards-container { + width: 90%; + } +} + +@media (min-width: 600px) and (max-width: 1123px) { + .bottom-ifocard-desktop-container div { + width: 75%; + } +} + +@media (min-width: 415px) and (max-width: 599px) { + .gallery-container { + grid-template-columns: repeat(auto-fill, minmax(94%, 1fr)); + } + + .gallery-container img { + width: 94%; + } + + .bottom-cards-container { + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + } + + .bottom-ifocard-desktop-container div { + width: 85%; + } +} + @media (max-width: 414px) { .banner-desktop { display: none; @@ -300,59 +346,6 @@ header { } } -@media (min-width: 1920px) { - .top-cards-container { - display: flex; - } - - .bottom-cards-container { - display: flex; - } -} - -@media (min-width: 1623px) and (max-width: 1912px) { - .top-cards-container { - width: 75%; - } -} - -@media (min-width: 1264px) and (max-width: 1622px) { - .top-cards-container { - width: 90%; - } -} - -@media (min-width: 600px) and (max-width: 1241px) { - .image03 { - position: relative; - left: 54%; - } -} - -@media (min-width: 600px) and (max-width: 1123px) { - .bottom-ifocard-desktop-container div { - width: 75%; - } -} - -@media (min-width: 415px) and (max-width: 599px) { - .gallery-container { - grid-template-columns: repeat(auto-fill, minmax(94%, 1fr)); - } - - .gallery-container img { - width: 94%; - } - - .bottom-cards-container { - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - } - - .bottom-ifocard-desktop-container div { - width: 85%; - } -} - @media (min-width: 350px) and (max-width: 380px) { .top-cards-container { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));