@media (min-width: 768px) and (max-width: 1024px) {
    .section-header {
        padding: 50px;
    }
    .domain button {
        width: 100%;
        margin: 0;
    }
    .domain button a{
        font-size: 12pt;
    }
    
    .domain a {
        font-size: 12pt;
    }
    
    .subdomain h1 {
        font-size: 30pt;
    }
    
    .subdomain p {
        width: 90%;
    }
    .subdomain button {
    font-size: 12pt;
    }
    .topics button {
        width: 25%;
        padding: 10px;
        margin: 0 15px;
        font-size: 12pt;
    }
    main {
        padding: 50px;
    }
    #section-topic1, #section-topic2, #section-topic3 {
        padding: 0;
    }
    #section-topic1 h2, #section-topic2 h2, #section-topic3 h2 {
        font-size: 25pt;
    }
    
    #section-topic1 p, #section-topic2 p, #section-topic3 p {
        font-size: 12pt;
    }

   .thumbnail-info {
        width: 80%;
    }
    
    #thumbnail-title {
        font-size: 16pt;
    }
    
    #thumbnail-description {
        font-size: 12pt;
    }
    
    .slider-images img {
        aspect-ratio: 16/9;
    }
    .scrollmobile {
        display: none;
        color: rgb(168, 128, 57);
    }
    .slider-btn {
        top: 40%;
    }
    
    .hero {
        padding-top: 50px;
    }
    .image-overlay h3 {
        font-size: 20pt;
    }
    
    .image-overlay p {
        font-size: 12pt;
        width: 80%;
    }

    .hero-image {
        aspect-ratio: 16 / 9;
    }
    
    .hero-overlay h2 {
        font-size: 25pt;
    }
    
    .hero-overlay p {
        width: 70%;
        font-size: 12pt;
    }    
}