main {
    display: grid;
    grid-template-columns: repeat(1, 1fr)!important; /* no. of cols, 1fr=equal size */
    grid-template:
    "tit"
    "con"
    "sum"
    "sug";
    padding: 0 5%;
    margin-bottom: 5rem;
    overflow-x:hidden;
}

.hd-dp {
    font-size: 54px;
}

header .nav-btn {
    margin: 0 5%;
    margin-top: 3rem;
}


#title > h1 {
    margin-bottom: 0;
    margin-top: 1.5rem;
    text-transform: uppercase;
    line-height: 95%;
}

#title > h2 {
    margin-top: 1rem; 
}

#title {
    grid-area: tit;
 
}

#content {
    grid-area: con;
    margin-bottom: 5rem;
}

#content > div > img, #content > div > div > img {
    width: 100%;
    height: auto;
    display: block;
}


/*new summary*/

#summary{
    grid-area: sum;
    display:flex;
    flex-direction: column;
    gap:20px;
}

#summary> :nth-child(1){
    flex:1;
    display: flex;
    flex-direction: row;
    gap: 25px;
}

#summary> :nth-child(2){
    flex:2;
}

#summary> :nth-child(1)> :nth-child(1){
    display:flex;
    flex-direction: column;
    row-gap: 0.5em;
    max-width: fit-content;
   
}

#summary> :nth-child(1)> :nth-child(1) p{
    white-space: nowrap;
}

#summary> :nth-child(1)> :nth-child(2){
    display:block;
    max-width: fit-content;
}

#summary> :nth-child(1)> :nth-child(1), #summary> :nth-child(1)> :nth-child(2){
    max-width:200px;

}

#summary> :nth-child(1)> :nth-child(1)>:nth-child(1){
    display:block;
}

#summary> :nth-child(1) h3{
    margin-bottom:0.75em;
}

#summary> :nth-child(1) p{
    margin-top:0;
}
/* end summary */

/* Suggested post section (not #projected so doesn't pull from global) */
#suggested {
    grid-area: sug;
    margin-top: 5rem; /* replace with grid gap */
}

#suggested > p {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.tile {
    text-decoration: none;
    width: 100%;
}

.tile:hover {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: black;
    background-color: initial;
}

.tile .thumb {
    cursor: pointer;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-in-out;
}

.tile:hover .thumb {
    transform: scale(105%);
    transform-origin: center;
}

.tile > p:first-of-type {
    margin-top: 0.5em;
}

.tile > p {
    margin: 0;
}

#suggested > img {
    padding-left: 2rem;
    max-width: 18%;
    min-width: 5rem;
}

#suggested .tile .image-container {
    width: 100%; /* Ensures the container takes full width of its parent */
    aspect-ratio: 1.75;
    overflow: hidden; /* Ensures that the image does not overflow the container */
    position: relative; /* Necessary for positioning the image inside */
    max-width: 800px;
}

/*REPLACE ABOVE ^^^^^^^^*/

/*QUOTE Style*/
#content .quote {
    border-left: 5px solid #634EA7;
    padding-left:1rem;

    max-width: 800px;
}

#content .quote :first-child{
    margin-top:0;
}
#content .quote> :last-child{
    margin-bottom:0;
}

/*END q style*/

/*check bullet list*/
#content .check-bullet > :first-child{
    line-height: normal;
 }
 
 #content .check-bullet > ul>li{
     display:flex;
  }
 
 #content .check-bullet > ul p{
     margin:0.75rem 0;
  }
 
   
 #content .check-bullet> ul>li>span{
    display:inline-flex;

 }
 #content .check-bullet> ul>li>span img{
    margin-right: 1rem;
    width:30px;
 }
 


@media (min-width:1400px){
    #content .check-bullet> ul>li>span{
        align-items: center;
     }

     #content .check-bullet > ul p{
        margin:0.75rem 0;
        position:unset;
     }

}

 /*endbullets*/

 /*endlongos*/

 #content .end-logo{
    display:flex;
    justify-content: center;
    padding:5rem 0 ;
}

    #content .end-logo >img{
        max-width:100px;
        height:auto;
    }
/*longos end*/

@media (min-width: 500px) {
    #content > p {
        max-width: 90%;
    }

    .hd-dp {
        font-size: 80px;
    }

   
}

@media (min-width: 900px) { /* was 767 This is font desktop shift */
    main {
        grid-template-columns: repeat(5, 1fr)!important; /* no. of cols, 1fr=equal size */
        grid-template:
        "tit tit tit tit ."
        "con con con con con"
         "sum sum sum sum sum"
          "sug sug sug   .    ."
        ;
    }

    header .nav-btn {
        margin-top: 0;
    }

    #content > p {
        max-width: 80%;
    }

    #summary{
        flex-direction: row;
    }

    #content .quote{
        margin:0 10%;
        padding-left:1rem;
    }

    #content .check-bullet{
        margin:0 10%;
    }
}


@media (min-width: 1259px) {
    main {
        grid-template-columns:repeat(6, 1fr)!important; /* no. of cols, 1fr=equal size */
        grid-template:
        "tit tit tit tit . ."
        "con con con con con con"
        ". . sum sum sum sum"
        "sug sug sug . . ."
        ;
    }

    #content > p {
        max-width: 70%;
    }
}

@media (min-width: 1400px) {
    #content .quote {
        max-width: initial;
        margin:0 22%;
    }
}

@media (min-width: 1700px) {
    main {
        grid-template-columns:repeat(12, 1fr)!important; 
        grid-template:
        "tit tit tit tit tit tit . . . . . ."
        "con con con con con con con con con con con con"
                ". . . . . sum sum sum sum sum sum sum"
        "sug sug sug sug sug . . . . . . ."
        ;
    }
 
    #content ul{
        max-width:80%;
    }
}

.bullet{
    list-style-type:initial;
    max-width:90%;
    margin:0 auto;
}

.bullet li{
padding: 0.25rem 0.25rem;
}

@media (min-width: 1700px) {
 
    .bullet{
        max-width:80%;
    }
}