i hope someone can help for it (look at the bold for the section)
i nead to fit my imageHere the preview of the problem for the explore section cause it doesn't fit when it's in destkop ratio, inead someone help as fast as it can if there is someone can help me fixing my code and find the problem for the "explore" section i really apreciate it!
HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Osvaliant</title><link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" rel="stylesheet" /><link rel="stylesheet" href="style/style.css" /></head><body><header class="header" id="header"><nav class="nav container"><a href="#" class="nav__link">OSVALIANT</a><div class="nav__menu" id="nav-menu"><ul class="nav__list"><li class="nav__item"><a href="#home" class="nav__link">Home</a></li><li class="nav__item"><a href="#about" class="nav__link">About</a></li><li class="nav__item"><a href="#division" class="nav__link">DIvision</a></li><li class="nav__item"><a href="#explore" class="nav__link">Other</a></li></ul><!-- ===== Close icon ===== --><div class="nav__close" id="nav-close"><i class="ri-close-line"></i></div></div><!-- ===== Toggle Button ===== --><div class="nav__toggle" id="nav-toggle"><i class="ri-menu-fill"></i></div></nav></header><main class="main"><section class="home" id="home"><div class="hero"><div class="box"><img class="icon__home" src="asset/img/osv.png" alt="OSVALIANT" /></div></div></section><section class="about" id="about"><div class="about__container container grid"><div class="about__data"><h2 class="section__title">About US</h2><p class="about__description"> We proudly adopted the name<strong>OSVALIANT</strong> for our cohort, as it perfectly reflects the strength and unity that define us. Rooted in the words valiant, OSVALIANT captures the spirit of a generation determined to face challenges head-on and create a positive impact. This name is not only a reflection of who we are today, but a promise to lead with purpose, integrity, and to remain bold in executing innovative leadership as we pave the way toward the future we desire.</p><a href="#" class="button">Let's See<i class="ri-arrow-right-s-fill"></i></a></div><div class="about__image"><img src="asset/img/ovs.png" class="about__img" /><div class="about__shadow"></div></div></div></section><section class="divisionsection" id="division"><h2 class="section__title">Student council <br />administrator</h2><div class="division__container container grid"><article class="division__card"><div class="division__image"><img src="asset/img/osis112.png" alt="img" class="division__img" /><div class="division__shadow"></div></div><h2 class="division__title">NAJLA</h2><p class="descripton_osis">Precident</p></article><article class="division__card"><div class="division__image"><img src="asset/img/osis112.png" alt="img" class="division__img" /><div class="division__shadow"></div></div><h2 class="division__title">TRISHA</h2><p class="descripton_osis">Precident</p></article><article class="division__card"><div class="division__image"><img src="asset/img/osis112.png" alt="img" class="division__img" /><div class="division__shadow"></div></div><h2 class="division__title">AQILLAH</h2><p class="descripton_osis">Precident</p></article></div></section>** <section class="explore section" id="explore"><div class="explore__container"><div class="explore__image"><img src="asset/img/1.jpg" alt="home" class="explore__img" /><div class="explore__shadow"></div></div><div class="explore__content container grid"><div class="explore__data"><h2 class="explore__title">VISI & MISI</h2><p class="explore__description"> VISI: <br /> Mewujudkan OSIS yang inovatif dan responsif untuk mendukung pengembangan potensi siswa secara optimal, sehingga dapat mewujudkan lingkungan sekolah yang berprestasi dan individu yang berperan konstruktif dalam memajukan sekolah.<br /><br /> MISI: <br /> 1. Memastikan OSIS berfungsi secara efektif dan efesien dalam menjalankan tugasnya dengan mengadakan evaluasi dan komunikasi yang terbuka.<br /> 2. Menjadi mediator yang efektif antara siswa dan pihak sekolah sehingga aspirasi dan ide-ide kreatif dari siswa dapat tersampaikan dengan baik.<br /> 3. Bekerja sama dengan pihak sekolah untuk mengadakan seminar, podcast, workshop, dan program-program relevan lainnya sehingga dapat mendukung peningkatan kompetensi siswa dalam banyak lingkup bidang: akademik, sosial, kognitif atau psikologis, olahraga, dan keterampilan lainnya.<br /> 4. Mengadakan kompetisi internal dan eksternal yang menantang serta memperkaya pengalaman siswa dalam banyak lingkup bidang.<br /> 5. Memanfaatkan teknologi modern dalam pelaksanaan program kerja OSIS.<br /></p></div><div class="explore__user"><img src="assets/img/Awe.png" alt="awe" class="explore__profile" /><span class="explore__name">OSIS/MPK</span></div></div></div></section>**</main><script src="script.js"></script></body></html>CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");/* ===== Vars ===== */:root { --header-height: 3.5rem; /*===== Colors =====*/ --title-color: hsl(0, 100%, 100%); --text-color: hsl(0, 0%, 70%); --text-color-light: hsl(0, 0%, 60%); --body-color: hsl(0, 0%, 0%); --container-color: hsl(0, 0%, 8%); /*===== Font =====*/ --body-font: "Poppins", sans_serif; --second-font: "Montserrat", sans_serif; --biggest-font-size: 2.75rem; --h1-font-size: 1.5rem; --h2-font-size: 1.25rem; --h3-font-size: 1rem; --normal-font-size: 0.938rem; --small-font-size: 0.813rem; --smaller-font-size: 0.75rem; /* ===== Font Weight ===== */ --font-regular: 400; --font-medium: 500; --font-semi-bold: 600; /* ===== Z index ===== */ --z-tooltip: 10; --z-fixed: 100;}/* ===== Responsive typography ===== */@media screen and (min-width: 1152px) { :root { --biggest-font-size: 5.5rem; --h1-font-size: 2.5rem; --h2-font-size: 1.5rem; --h3-font-size: 1.25rem; --normal-font-size: 1rem; --small-font-size: 0.875rem; --smaller-font-size: 0.813rem; }}* { box-sizing: border-box; padding: 0; margin: 0;}html { scroll-behavior: smooth;}body { align-items: center; justify-content: center; min-height: 100vh; display: flex; background: #000000;}body,button,input { font-family: var(--body-font); font-size: var(--normal-font-size); color: var(--text-color);}button,input { outline: none; border: none;}h1,h2,h3,h4 { color: var(--title-color); font-family: var(--second-font); font-weight: var(--font-semi-bold);}ul { list-style: none;}a { text-decoration: none;}img { display: block; max-width: 100%; height: auto;}/* ===== Reausable CSS ===== */.container { max-width: 1120px; margin-inline: 1.5rem;}.grid { display: grid; gap: 1.5rem;}.section { padding-block: 5rem 1rem;}.section__title { text-align: center; font-size: var(--h1-font-size); margin-bottom: 1.5rem;}.main { overflow: hidden;}/* ===== Header & Nav ===== */.header { position: fixed; width: 100%; border-color: transparent; top: 0; left: 0; z-index: var(--z-fixed);}.nav { height: var(--header-height); display: flex; justify-content: space-between; align-items: center;}.nav__logo,.navbar a { color: var(--title-color); font-family: var(--second-font); font-weight: var(--font-semi-bold);}.nav__toggle,.nav__close { display: flex; font-size: 1.25rem; color: var(--title-color); cursor: pointer;}/* ===== Navigation Mobile ===== */@media screen and (max-width: 1023px) { .nav__menu { position: fixed; top: -100%; left: 0; background-color: hsla(0, 0%, 0%, 0.3); width: 100%; padding-block: 4rem; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transition: top 0.4s; }}.home { padding-top: 30%;}.nav__list { text-align: center; display: flex; flex-direction: column; row-gap: 2.5rem;}.nav__link { position: relative; color: var(--title-color); font-family: var(--second-font); font-weight: var(--font-medium);}.nav__close { position: absolute; top: 1rem; right: 1.5rem;}.show-menu { top: 0;}/* Add Blur to Header */.blur-header::after { content: ""; position: absolute; width: 1000%; height: 100%; background-color: hsla(0, 0%, 0%, 0.3); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); top: 0; left: 0; z-index: -1;}.home { padding-top: 0; display: flex; justify-content: center; align-items: center;}.icon__home { position: relative; padding-top: 0; color: #fff; width: 50em; max-width: 100%; filter: drop-shadow(0 0 20px rgba(30, 25, 177, 0.5));}/* ===== BUTTON ===== */.button { border-color: hsla(0, 0%, 100%, 0.2); padding: 1.25rem 1.5rem; color: var(--title-color); display: inline-flex; align-items: center; column-gap: 0.5rem; font-family: var(--second-font); font-weight: var(--font-semi-bold); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);}.button i { font-size: 1.25rem; transition: transform 0.4s; font-weight: initial;}.button:hover i { transform: translateX(0.25rem);}/* ===== ABOUT ===== */.about__container { row-gap: 2rem;}.about__data { text-align: center;}.about__description img { max-width: 50%; height: auto;}.about__description { margin-bottom: 2rem;}.about__image { position: relative; justify-self: center;}.about__img { width: 30%; transition: transform 0.4s; filter: drop-shadow(0 0 20px rgba(30, 25, 177, 0.5));}.about__shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 180deg, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 125% );}.about__image:hover .about__img { transform: scale(1.2);}/* ===== DIVISION ===== */.division__container { padding-top: 1.5rem; grid-template-columns: 240px; justify-content: center; row-gap: 2.5rem;}.division__image { position: relative; overflow: hidden; margin-bottom: 1rem;}.division__img { transition: transform 0.4s; transition: transform 0.4s; filter: drop-shadow(0 0 20px rgba(30, 25, 177, 0.5));}.division__shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 180deg, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 125% );}.division__title { font-size: var(--h3-font-size); margin-bottom: 0.5rem;}/* .Division__icon {display: inline-flex;align-items: center;column-gap: .25remvar(--h1-font-size)var(--small-font-size);font-family: var(--second-font);font-weight: 500;}.division__icon i {font-size: 1rem;} */.division__image:hover .division__img { transform: scale(1.2);}/* ===== EXPLORE ===== */.explore { position: relative;}.explore__image { position: absolute; overflow: hidden;}.explore__img { width: 100%; height: auto; object-position: center;}.explore__shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 180deg, hsl(0, 0%, 0%) 5%, hsla(0, 0%, 0%, 0) 40%, hsla(0, 0%, 0%, 0) 60%, hsl(0, 0%, 0%) 92% );}.explore__content { position: relative; padding-top: 16rem; text-align: center; row-gap: 2.5rem;}.explore__user { display: inline-flex; align-items: center; justify-content: center; column-gap: 0.5rem;}.explore__profile { width: 30px; border-radius: 50%;}.explore__name { font-size: var(--small-font-size); color: var(--title-color);}/* ===== BREAKPOINT ===== *//* Small Device */@media screen and (max-width: 425px) { .container { margin-inline: 1rem; } .home { padding-bottom: 55%; padding-top: 70%; } .home__data { padding-top: 4rem; } .home__title { font-size: 3rem; } .about__img { width: 300px; height: auto; } .about { padding-bottom: 20%; } .section__title { font-size: 1.5rem; } .footer__data { grid-template-columns: max-content; }}/* Medium Device */@media screen and (min-width: 576px) { .home { padding-top: 35%; padding-bottom: 40%; } .home__container, .about__container, .explore__content, .more__container { grid-template-columns: 380px; justify-content: center; } .about { padding-bottom: 15%; } .about__img { width: 300px; height: auto; } .footer__data { grid-template-columns: repeat(3, max-content); }}@media screen and (min-width: 768px) { .home__cards { grid-template-columns: repeat(2, 240px); } .about__container, .more__container { grid-template-columns: repeat(2, 350px); align-items: center; } .about__data, .about__data .section__title, .more__data, .more__data .section__title { text-align: initial; } .division__container { grid-template-columns: repeat(2, 240px); } .explore__img { width: 100%; } .more__image { order: -1; } .footer__content { grid-template-columns: repeat(2, max-content); justify-content: space-between; } .footer__group { flex-direction: row; justify-content: space-between; } .footer__copy { order: -1; }}/* Large Device */@media screen and (min-width: 1023px) { .nav__close, .nav__toggle { display: none; } .nav__list { flex-direction: row; column-gap: 4rem; } .home { padding-top: 30%; padding-bottom: 25%; } .division__container { grid-template-columns: repeat(3, 240px); } .section__title { font-size: 1.7rem; } .footer__data { grid-template-columns: repeat(4, max-content); column-gap: 4.5rem; }}@media screen and (min-width: 1152px) { .container { margin-inline: auto; } section { padding-block: 7rem 2rem; } nav { height: calc(var(--header-height) + 1.5rem); } .blur-header::after { backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); } .home__container { grid-template-columns: initial; justify-content: initial; row-gap: 4rem; padding-top: 2rem; } .home__shadow { height: 980px; } .home__data { text-align: initial; width: 480px; } .home__subtitle { font-size: var(--h2-font-size); } .home__description { margin-bottom: 2.5rem; } .home__cards { grid-template-columns: repeat(4, 260px); } .home__cart-title { left: 1.5rem; bottom: 1.5rem; } .button { column-gap: 1.5rem; } .about__container { grid-template-columns: 400px 460px; column-gap: 8.5rem; padding-block: 1rem; } .about__description { margin-bottom: 3rem; } .about__img { width: 460px; } .division__container { grid-template-columns: repeat(3, 300px); column-gap: 3rem; padding-top: 4rem; } .division__title { font-size: var(--h2-font-size); } .division__icon { font-size: var(--normal-font-size); } **.explore__img { height: 100%; } .explore__content { padding-top: 28rem; grid-template-columns: 670px 1fr; } .explore__data, .explore__data .section__title { text-align: initial; } .explore__user { justify-content: flex-end; align-self: flex-end; margin-bottom: 1.25rem; }** .more__container { grid-template-columns: 460px 340px; column-gap: 8.5rem; padding-block: 1rem 5rem; } .more__img { width: 460px; } .more__description { margin-bottom: 3rem; } .footer { padding-block: 5rem 3rem; } .footer__title { margin-bottom: 1.5rem; } .footer__group { margin-top: 7rem; } .footer__social { column-gap: 2rem; } .footer__social-link { font-size: 1.5rem; } .scrollup { right: 3rem; }}