@charset "utf-8";
html {
  scroll-behavior: smooth;
}


body {
    background-color: #333333;
}

.teared-paper {
    width: 100%;
    min-height: 100px;
    margin: -100px auto;
    transition: clip-path 0.5s ease;
    padding: 100px 0 70px 0;
  }

  /* Styling for better visualization */
  .teared-paper:nth-child(1) {
    background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/Blue_grid_BG.jpg);
    background-size: cover;
    background-position: 50% 50%;
  }

  .teared-paper:nth-child(2) {
    background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/Darkblue_grid_BG.jpg);
    background-size: cover;
    background-position: 50% 50%;
  }

  .teared-paper:nth-child(3) {
    background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/Teal_wrinkle_BG.jpg);
    background-size: cover;
    background-position: 50% 50%;
  }

  .teared-paper:nth-child(4) {
    background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/DarkerRed_speckled_BG.jpg);
    background-size: cover;
    background-position: 50% 50%;
  }

  .teared-paper:nth-child(5) {
    background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/Magenta_wrinkle_BG.jpg);
    background-size: cover;
    background-position: 50% 50%;
  }

  .teared-paper:nth-child(6) {
    background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/Bandera_darkerred_watercolor_BG.jpg);
    background-size: cover;
    background-position: 50% 50%;
  }

  .teared-paper:nth-child(7) {
    background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/Black_wrinkle_BG.jpg);
    background-size: cover;
    background-position: 50% 50%;
  }


.top-banner {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/Banner_newspaper_BG.png);
    background-size: cover;
    background-position: 50% 50%;
    z-index: 99;
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.second-banner {
    width: 100%;
    height: auto;
    z-index: -1;
    position: relative;
    background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/Black_wrinkle_BG.jpg);
    background-position: 50% 50%;
    background-size: cover;
    margin-top: -70px;
    padding: 100px 0 110px 0;
}

.section-body {
    width: 980px;
    height: auto;
    margin: 0 auto;
   
}

.sb-grid {
    width: 980px;
    height: auto;
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}



.section-body p {
font-family: "Noto Serif";
font-size: 18px;
font-style: normal;
letter-spacing: 0.02em;
font-weight: 400;
line-height: 1.4em;
color: #f3f3f3;
padding: 15px 0;
}

.bg-col {
    background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/bnw-col.png);
    background-size: contain;
    background-position: 50% 50%;
    aspect-ratio: 16/9;
    width: 80%;
    background-repeat: no-repeat;
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.top-logo {
    background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/2024-logo.png);
    aspect-ratio: 16/9;
    width: 70%;
    background-size: contain;
    background-position: 50% 50%;
    margin-top: 70px;
}

@media only screen and (min-width: 1440px) and (max-width: 4000px){

    .top-banner {
        width: 1440px;
        height: auto;
        background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/Banner_newspaper_BG.png);
        background-size: cover;
        background-repeat: repeat-x;
        background-position: 50% 50%;
        z-index: 99;
        display: flex;
        align-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 auto;
    }
    
    }

/* 414-600 */
@media only screen and (min-width: 414px) and (max-width: 599px){

    .top-banner {
        width: 100%;
        height: auto;
        aspect-ratio: 9/16;
        background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/Mobile_Banner_newspaper_BG.png);
        background-size: cover;
        background-position: 50% 50%;
        z-index: 99;
        display: flex;
        align-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    
    .top-logo {
        background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/2024-logo.png);
        aspect-ratio: 16/9;
        width: 100%;
        background-size: contain;
        background-position: 50% 50%;
        margin-top: 70px;
    }
    
    .section-body {
        width: 93%;
        height: auto;
        margin: 0 auto;
    }
}

/* small phones */
@media only screen and (min-width: 320px) and (max-width: 413px){

.top-banner {
    width: 100%;
    height: auto;
    aspect-ratio: 9/16;
    background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/Mobile_Banner_newspaper_BG.png);
    background-size: cover;
    background-position: 50% 50%;
    z-index: 99;
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}


.top-logo {
    background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/2024-logo.png);
    aspect-ratio: 16/9;
    width: 80%;
    background-size: contain;
    background-position: 50% 50%;
    margin-top: -20px;
}

.section-body {
    width: 93%;
    height: auto;
    margin: 0 auto;
}

.teared-paper {
    padding: 120px 0 70px 0;
  }

  .bg-col {
    background-image: url(https://www.inquirer.net/inq2016/year-end-2024/images/bnw-col-port.png);
    background-size: contain;
    background-position: 50% 50%;
    aspect-ratio: 9/16;
    width: 93%;
}

}