You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

148 lines
2.5 KiB

@import "./Course/index.scss";
.home-courses {
width: 100%;
margin: 0px auto;
position: relative;
padding: 20px 10px 30px;
font-family: numeralLight;
&-dark {
border-top: 1px solid $gray8;
border-bottom: 1px solid $gray8;
}
&-light{
border-top: none !important;
border-bottom: 1px solid $gray12;
header{
h1{
color : $green !important;
}
a{
color: $green !important;
}
}
.home-courses__more{
background-color: white !important;
}
}
header {
margin-bottom: 20px;
h1 {
font-family: numeralMedium;
color: white;
margin-bottom: 10px;
}
span {
color: $gray;
}
a {
display: none;
}
}
&__more {
position: absolute;
bottom: 0px;
left: 50%;
transform: translate(-50%, +50%);
background-color: black;
padding-right: 5px;
color: $green;
&:hover {
color: $green;
}
}
&__list {
scrollbar-width: 0px;
&::-webkit-scrollbar {
display: none;
width: 0px;
}
}
}
@media screen and (min-width: 1441px) {
.home-courses {
max-width: 1350px;
header {
h1 {
font-size: 20px;
}
span {
font-size: 12px;
}
}
&__more {
font-size: 13px;
}
}
}
@media screen and (min-width: 1008px) and (max-width: 1440px) {
.home-courses {
max-width: 1250px;
header {
h1 {
font-size: calc(100vw / 75);
}
span {
font-size: calc(100vw / 120);
}
}
&__more {
font-size: calc(100vw / 100);
}
}
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.home-courses {
max-width: 900px;
header {
h1 {
font-size: calc(100vw / 40);
}
span {
font-size: calc(100vw / 90);
}
}
&__more {
font-size: calc(100vw / 90);
}
&__list {
overflow-x: scroll;
}
}
}
@media screen and (max-width: 640px) {
.home-courses {
max-width: 500px;
border: 0px !important;
padding: 0px !important;
margin-top: 15px;
header {
h1 {
font-size: calc(100vw / 25);
margin-bottom: 10px;
}
span {
font-size: calc(100vw / 34);
}
a {
display: flex;
color: $green;
font-size: calc(100vw / 28);
}
}
&__more {
display: none !important;
}
&__list {
overflow-x: scroll;
&::-webkit-scrollbar {
scrollbar-width: 0px;
display: none;
}
}
}
}