82 lines
		
	
	
	
		
			1.8 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			82 lines
		
	
	
	
		
			1.8 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
| #banner-container-home {
 | |
|     display: flex;
 | |
|     justify-content: space-between;
 | |
|     align-items: flex-start;
 | |
|     margin: 0.2rem auto;
 | |
|     width: 100%;
 | |
| 
 | |
|     @media only screen and (max-width: 600px) {
 | |
|         display: block;
 | |
|         margin-block-end: 2rem;
 | |
|     }
 | |
| 
 | |
|     #home-banner-text {
 | |
|         flex: 1;
 | |
|         margin-block-end: 1.5rem;
 | |
|         color: var(--primary-color);
 | |
|         font-size: 1.875rem;
 | |
|         line-height: 3rem;
 | |
| 
 | |
|         li {
 | |
|             font-size: 1rem;
 | |
|         }
 | |
| 
 | |
|         #home-banner-header {
 | |
|             margin: 0;
 | |
|             margin-block-end: 1rem;
 | |
|             font-weight: 550;
 | |
|             font-size: 2.8rem;
 | |
| 
 | |
|             @media only screen and (max-width: 600px) {
 | |
|                 margin-block-end: 0;
 | |
|                 font-size: 2.2rem;
 | |
|             }
 | |
|         }
 | |
| 
 | |
|         #banner-home-subtitle {
 | |
|             color: var(--text-color);
 | |
|             font-weight: 250;
 | |
|             line-height: 1.75rem;
 | |
| 
 | |
|             p {
 | |
|                 font-size: 1rem;
 | |
|             }
 | |
| 
 | |
|             a {
 | |
|                 font-weight: 400;
 | |
|             }
 | |
|         }
 | |
| 
 | |
|         @media only screen and (max-width: 600px) {
 | |
|             width: 100%;
 | |
|         }
 | |
|     }
 | |
| 
 | |
|     #image-container-home {
 | |
|         position: relative;
 | |
|         margin: auto 0;
 | |
|         padding-inline-start: 2rem;
 | |
|         max-width: 11rem;
 | |
|         overflow: hidden;
 | |
|         text-align: center;
 | |
| 
 | |
|         #banner-home-img {
 | |
|             border: none;
 | |
|             aspect-ratio: 1 / 1;
 | |
|             width: 100%;
 | |
|             height: 100%;
 | |
|             object-fit: cover;
 | |
| 
 | |
|             @media only screen and (max-width: 600px) {
 | |
|                 max-width: 12rem;
 | |
|                 max-height: 12rem;
 | |
|             }
 | |
|         }
 | |
| 
 | |
|         @media only screen and (max-width: 600px) {
 | |
|             padding-inline-start: 0;
 | |
|             width: 100%;
 | |
|             max-width: none;
 | |
|         }
 | |
|     }
 | |
| }
 |